diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index 0ef6a0864247e1..dd7c05f5640dcc 100644 --- a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -16,8 +16,8 @@ slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js - Удостовериться, что вы используете современную версию браузера с поддержкой [WebGL](/ru/docs/Web/API/WebGL_API), например, Firefox или Chrome. - Создать папку для экспериментов. -- Сохранить копию [последней версии библиотеки Three.js](http://threejs.org/build/three.min.js) в вашей папке. -- Открыть [документацию Three.js](http://threejs.org/docs/) в отдельной вкладке. +- Сохранить копию [последней версии библиотеки Three.js](https://threejs.org/build/three.min.js) в вашей папке. +- Открыть [документацию Three.js](https://threejs.org/docs/) в отдельной вкладке. ## HTML структура @@ -105,7 +105,7 @@ scene.add(camera); ## Отрисовка сцены -Всё уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам всё равно нужно запустить рендеринг. Функция `render()` выполнит эту работу с небольшой помощью [`requestAnimationFrame()`](/ru/docs/Web/API/window/requestAnimationFrame), которая заставляет сцену постоянно перерисовываться в каждом кадре: +Всё уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам всё равно нужно запустить рендеринг. Функция `render()` выполнит эту работу с небольшой помощью [`requestAnimationFrame()`](/ru/docs/Web/API/Window/requestAnimationFrame), которая заставляет сцену постоянно перерисовываться в каждом кадре: ```js function render() { diff --git a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.md b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.md index 25212a7accb437..e0fd5b79635c06 100644 --- a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.md +++ b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.md @@ -130,7 +130,7 @@ To actually apply the newly created shaders to the cube, comment out the `basicM // var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); ``` -Далее, создаём [`shaderMaterial`](http://threejs.org/docs/#Reference/Materials/ShaderMaterial): +Далее, создаём [`shaderMaterial`](https://threejs.org/docs/#Reference/Materials/ShaderMaterial): ```js var shaderMaterial = new THREE.ShaderMaterial({ @@ -237,4 +237,4 @@ This article has taught the very basics of shaders. Our example doesn't do much ## Смотрите также - [Изучение WebGL](http://learningwebgl.com/blog/?page_id=1217) — for general WebGL knowledge -- [WebGL шейдеры и GLSL основы](http://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html) — for GLSL specific information +- [WebGL шейдеры и GLSL основы](https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html) — for GLSL specific information diff --git a/files/ru/games/techniques/async_scripts/index.md b/files/ru/games/techniques/async_scripts/index.md index 44ed99254075d1..029e295ba85dad 100644 --- a/files/ru/games/techniques/async_scripts/index.md +++ b/files/ru/games/techniques/async_scripts/index.md @@ -27,7 +27,7 @@ document.body.appendChild(script); ## Когда асинхронный не асинхронный? -Две распространённые ситуации, в которых сценарий не асинхронен (как [определено спецификацией HTML](http://www.w3.org/TR/html5/scripting-1.html) ): +Две распространённые ситуации, в которых сценарий не асинхронен (как [определено спецификацией HTML](https://www.w3.org/TR/html5/scripting-1.html) ): ```html diff --git a/files/ru/games/techniques/controls_gamepad_api/index.md b/files/ru/games/techniques/controls_gamepad_api/index.md index 17fe93f7f31251..6b55edab879100 100644 --- a/files/ru/games/techniques/controls_gamepad_api/index.md +++ b/files/ru/games/techniques/controls_gamepad_api/index.md @@ -15,7 +15,7 @@ slug: Games/Techniques/Controls_Gamepad_API ## API статус и поддержка браузера -[Gamepad API](http://www.w3.org/TR/gamepad/) все ещё находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все ещё может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad. +[Gamepad API](https://www.w3.org/TR/gamepad/) все ещё находится на стадии рабочего проекта в процессе W3C, что означает, что его реализация все ещё может измениться, но говорит о том, что поддержка браузера уже довольно хороша. Firefox 29+ и Chrome 35+ поддерживают его сразу после установки. Opera поддерживает API в версии 22+ (неудивительно, учитывая, что теперь они используют движок Blink Chrome.) И Microsoft недавно реализовала поддержку API в Edge,что означает, что четыре основных браузера теперь поддерживают API Gamepad. ## Какие геймпады лучше всего? diff --git a/files/ru/games/tools/index.md b/files/ru/games/tools/index.md index 499a45fbc6beb6..16b77f4c686333 100644 --- a/files/ru/games/tools/index.md +++ b/files/ru/games/tools/index.md @@ -19,8 +19,8 @@ slug: Games/Tools - : Shumway это рендер для Adobe Flash построенный полностью на JavaScript, WebGL, etc., преодолевающий разрыв между Flash и web-стандартами. Это статья поясняет, как пользоваться Shumway,и как вносить исправления в проекте. - Инструментарий для разработки и отладки игр - - : Чем это отличается от обычной отладки веб-приложения? Какие специальные инструменты доступны? Многое из этого доступно в [инструментах](/ru/docs/Tools), но здесь мы должны обеспечить своего рода практический учебник для отладки игры, с ссылками : + - : Чем это отличается от обычной отладки веб-приложения? Какие специальные инструменты доступны? Многое из этого доступно в [инструментах](https://firefox-source-docs.mozilla.org/devtools-user/index.html), но здесь мы должны обеспечить своего рода практический учебник для отладки игры, с ссылками : - Обзор базовых инструментов - - [Редактор шейдеров](/ru/docs/Tools/Shader_Editor) + - [Редактор шейдеров](https://firefox-source-docs.mozilla.org/devtools-user/shader_editor/index.html) - Производственные инструменты (все ещё находятся в производстве, по оценкам, в начале 2014 года) diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md index 5673464ed54ebe..ce92001ab99045 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md @@ -33,7 +33,7 @@ function ballHitBrick(ball, brick) { Спасибо Phaser за то, что передал нам в функцию эти два параметра — мячик и тот кирпич, с которым у мячика произошла коллизия. А дальше мы просто удаляем кирпич с экрана, вызвав у него функцию `kill()`. -Вы думали, что нам придётся писать много кода для отслеживания коллизий, как мы это делали на [чистом JavaScript](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection)? В этом и прелесть фреймворков — рутину они сделают за нас, а мы, в это время, можем сосредоточиться на действительно интересных вещах. +Вы думали, что нам придётся писать много кода для отслеживания коллизий, как мы это делали на [чистом JavaScript](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection)? В этом и прелесть фреймворков — рутину они сделают за нас, а мы, в это время, можем сосредоточиться на действительно интересных вещах. ## Сравните свой код diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md index 8d4803b1384623..082a0bb60ea0a0 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md @@ -130,6 +130,6 @@ function ballLeaveScreen() { ## Следующий шаг -Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут ещё 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать её более красивой, добавив [анимацию и эффекты](/ru/docs/Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens). +Жизни делают игру более казуальной — даже если вы проиграете единожды, у вас будут ещё 2 жизни и вы сможете продолжить игру. Теперь мы можем поработать над внешним видом игры, сделать её более красивой, добавив [анимацию и эффекты](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens). {{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.md index 7ced3d6b501334..367f1a51c2386f 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/game_over/index.md @@ -37,6 +37,6 @@ ball.events.onOutOfBounds.add(function () { ## Следующий шаг -Базовый геймплей готов. Но какой арканоид без разбивания [кирпичиков](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей)? +Базовый геймплей готов. Но какой арканоид без разбивания [кирпичиков](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field)? {{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/index.md index 21fa3ba2943561..878921e7f23e2d 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/index.md @@ -17,18 +17,18 @@ slug: Games/Tutorials/2D_breakout_game_Phaser Все уроки и различные версии [MDN Breakout](https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html), которые мы сделаем вместе, доступны на [GitHub](https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/): -1. [Инициализация фреймворка](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework) -2. [Масштабирование](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Scaling) -3. [Загрузка ресурсов и их вывод](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Load_the_assets_and_print_them_on_screen) -4. [Движение мяча](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Move_the_ball) -5. [Физика](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Physics) -6. [Отскакивание от стен](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls) -7. [Управление](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Платформа_и_управление) -8. [Конец игры](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over) -9. [Создание поля блоков](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Создание_кирпичей) -10. [Определение столкновения](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Обработка_коллизий) -11. [Счёт](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Очки) -12. [Победа в игре](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Победа) +1. [Инициализация фреймворка](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework) +2. [Масштабирование](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Scaling) +3. [Загрузка ресурсов и их вывод](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen) +4. [Движение мяча](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball) +5. [Физика](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Physics) +6. [Отскакивание от стен](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls) +7. [Управление](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls) +8. [Конец игры](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over) +9. [Создание поля блоков](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field) +10. [Определение столкновения](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Collision_detection) +11. [Счёт](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score) +12. [Победа в игре](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Win_the_game) 13. [Добавление жизней](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Extra_lives) 14. [Анимация](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens) 15. [Кнопки](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Buttons) @@ -43,6 +43,6 @@ slug: Games/Tutorials/2D_breakout_game_Phaser ## Следующие шаги -Давайте начнём! Первая часть руководства — это [Инициализация фреймворка](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework). +Давайте начнём! Первая часть руководства — это [Инициализация фреймворка](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework). {{Next("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Initialize_the_framework")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md index 0d0172753872e8..5eaafb7442dad8 100644 --- a/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md @@ -121,6 +121,6 @@ ball.body.velocity.set(150, -150); ## Следующий шаг -Мы можем управлять платформой и сделали так, чтобы мячик отскакивал от неё. Но какой от этого толк, если мячик отскакивает и от нижней грани экрана? В следующей главе мы добавим [логику проигрыша и экран "Game over"](/ru/docs/Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over). +Мы можем управлять платформой и сделали так, чтобы мячик отскакивал от неё. Но какой от этого толк, если мячик отскакивает и от нижней грани экрана? В следующей главе мы добавим [логику проигрыша и экран "Game over"](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over). {{PreviousNext("Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Bounce_off_the_walls", "Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser/Game_over")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index c774fe853e5839..a04a1cbdff287c 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -5,9 +5,9 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Переместить_мяч", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}} -Это 3-й этап из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код как он должен выглядеть после завершения этого урока в [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html). +Это 3-й этап из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код как он должен выглядеть после завершения этого урока в [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html). -Приятно наблюдать за нашим мяч, но он быстро исчезает с экрана, удовольствие длится недолго! Чтобы продлить, мы реализуем некоторое очень простое обнаружение столкновений (о которых будет рассказано [далее](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection) более подробно), чтобы сделать отскок мяча от четырёх краёв холста. +Приятно наблюдать за нашим мяч, но он быстро исчезает с экрана, удовольствие длится недолго! Чтобы продлить, мы реализуем некоторое очень простое обнаружение столкновений (о которых будет рассказано [далее](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) более подробно), чтобы сделать отскок мяча от четырёх краёв холста. ## Простое обнаружение столкновений @@ -103,6 +103,6 @@ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { ## Следующий шаг -Теперь мы добрались до стадии, где наш мяч одновременно двигается и остаётся на игровом поле. В четвёртой главе мы рассмотрим реализацию управления — см. [Paddle and keyboard controls](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls). +Теперь мы добрались до стадии, где наш мяч одновременно двигается и остаётся на игровом поле. В четвёртой главе мы рассмотрим реализацию управления — см. [Paddle and keyboard controls](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md index 276726eb04f395..29bb2ca313959d 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection")}} -Это 6 шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут - [Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html). +Это 6 шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут - [Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html). После изменения механики игрового процесса мы теперь можем проиграть - это здорово, так как это означает, что игра, наконец, больше похожа на игру. Тем не менее, он быстро станет скучным, если все, что вы делаете, это отскок шара от стен и биты. То, что действительно нужно для прорыва - это кирпичи, которые нужно уничтожить мячом, и это то, что мы сейчас создадим! @@ -106,6 +106,6 @@ drawBricks(); ## Следующие шаги -Итак, теперь у нас есть кирпичи! Но мяч вообще не взаимодействует с ними - мы изменим это, поскольку мы переходим в седьмую главу: [Collision detection](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection). +Итак, теперь у нас есть кирпичи! Но мяч вообще не взаимодействует с ними - мы изменим это, поскольку мы переходим в седьмую главу: [Collision detection](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md index a9731b704bdad8..b5ce2ee642dc36 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}} -Это 7 шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут [Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html). +Это 7 шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код, как он будет выглядеть после завершения этого урока, тут [Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html). У нас уже есть кирпичи, появляющиеся на экране, но игра все ещё не так интересна, ведь мяч проходит сквозь них. Нам нужно подумать о добавлении обнаружения столкновений, чтобы он мог отскакивать от кирпичей и ломать их. @@ -130,6 +130,6 @@ collisionDetection(); ## Следующие шаги -Мы уверенно движемся вперёд! Поехали! В восьмой главе мы будем учиться [отслеживать счёт и выигрывать](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win). +Мы уверенно движемся вперёд! Поехали! В восьмой главе мы будем учиться [отслеживать счёт и выигрывать](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index d3fcb9e340ad59..61eb96c30338b9 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_dra {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Переместить_мяч")}} -Это **1й шаг** из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код для этого урока по ссылке [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html). +Это **1й шаг** из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код для этого урока по ссылке [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html). Прежде чем мы сможем начать писать функциональные возможности игры, нам необходимо создать базовую структуру для рендеринга игры внутри. Это можно сделать с помощью HTML и элемента {{htmlelement ("canvas")}}. @@ -108,6 +108,6 @@ ctx.closePath(); ## Следующие шаги -Сейчас мы создали базовый HTML и немного узнали о canvas, давайте на следующем шаге изучим, как [Двигать мяч в нашей игре](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Move_the_ball). +Сейчас мы создали базовый HTML и немного узнали о canvas, давайте на следующем шаге изучим, как [Двигать мяч в нашей игре](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md index 173281fa7daf15..9464996b6e902d 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up {{GamesSidebar}}{{Previous("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управление_мышью")}} -Это 10-й и заключительный шаг в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код, как он должен выглядеть, после завершения этого урока в [Gamedev-Canvas-workshop/lesson10.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html). +Это 10-й и заключительный шаг в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код, как он должен выглядеть, после завершения этого урока в [Gamedev-Canvas-workshop/lesson10.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html). В любой игре, которую мы пишем, всегда есть место для улучшений. Например, мы можем предложить игроку несколько жизней. Они могут сделать несколько ошибок и всё равно закончить игру. Мы также можем улучшить отрисовку кода. @@ -100,8 +100,8 @@ requestAnimationFrame(draw); ## Игра закончена - на данный момент! -Вы закончили все уроки — поздравляем! К этому моменту вы должны знать основы манипулирования canvas и логику простых 2D-игр. Сейчас самое время изучить некоторые фреймворки и продолжить разработку игр. Вы можете проверить аналог этой серии, [2D breakout game using Phaser](/ru/docs/Games/Workflows/2D_breakout_game_Phaser) или [Cyber Orb built in Phaser](/ru/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation) учебник. Вы также можете просмотреть раздел [Games section on MDN](/ru/docs/Games) для вдохновения и увеличения знаний. +Вы закончили все уроки — поздравляем! К этому моменту вы должны знать основы манипулирования canvas и логику простых 2D-игр. Сейчас самое время изучить некоторые фреймворки и продолжить разработку игр. Вы можете проверить аналог этой серии, [2D breakout game using Phaser](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser) или [Cyber Orb built in Phaser](/ru/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation) учебник. Вы также можете просмотреть раздел [Games section on MDN](/ru/docs/Games) для вдохновения и увеличения знаний. -Вы также можете вернуться на [this tutorial series' index page](/ru/docs/Games/Workflows/Breakout_game_from_scratch) учебника. Получайте удовольствие от написания кода! +Вы также можете вернуться на [this tutorial series' index page](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) учебника. Получайте удовольствие от написания кода! {{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md index c3ec47f66a9db6..98a6e7d818fe37 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создаём_зону_кирпичей")}} -Это - 5-й шаг из 10 из [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код к этому уроку в [Gamedev-Canvas-workshop/lesson5.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html). +Это - 5-й шаг из 10 из [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код к этому уроку в [Gamedev-Canvas-workshop/lesson5.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html). Конечно интересно наблюдать за отражающимся мячом и двигать биту, но кроме этого игра ничего не делает и не имеет никакого прогресса или конечной цели. Было бы хорошо с точки зрения геймплея иметь возможность проигрыша. Логика проигрыша в потере мяча. Если вы пропустите мяч и дадите ему добраться до нижнего края экрана, то на этом игра закончится. @@ -79,6 +79,6 @@ if (y + dy < ballRadius) { ## Следующие шаги -Все идёт хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все ещё не хватает чего-то. Перейдём к шестой главе — [Build the brick field](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Build_the_brick_field) — и создадим некоторые кирпичи для шара, чтобы их уничтожить. +Все идёт хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все ещё не хватает чего-то. Перейдём к шестой главе — [Build the brick field](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) — и создадим некоторые кирпичи для шара, чтобы их уничтожить. {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.md index 56fbd32e1ad8ee..9e013b1810ced3 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -9,7 +9,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript К каждому шагу прилагаются редактируемые live-примеры, с которыми можно поиграть, чтобы увидеть, как должна выглядеть игра на промежуточных этапах. Вы изучите основы использования элемента {{htmlelement("canvas")}} для реализации таких фундаментальных игровых механик, как рендеринг и перемещение изображений, обнаружение столкновений, механизмы управления, а также состояния выигрыша и проигрыша. -Для извлечения максимальной пользы из этой серии статей необходимо иметь средние (или хотя бы базовые) знания языка [JavaScript](/en-US/Learn/Getting_started_with_the_web/JavaScript_basics). После прохождения этого урока вы сможете создавать собственные простые браузерные игры. +Для извлечения максимальной пользы из этой серии статей необходимо иметь средние (или хотя бы базовые) знания языка [JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics). После прохождения этого урока вы сможете создавать собственные простые браузерные игры. ![Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.](mdn-breakout-gameplay.png) @@ -17,27 +17,27 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript Все уроки и версии игры [MDN Breakout](http://breakout.enclavegames.com/lesson10.html) доступны в [GitHub](https://github.com/end3r/Canvas-gamedev-workshop): -1. [Создание Canvas и рисование на нем](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it) -2. [Движение мяча](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball) -3. [Реакция при столкновении со стеной](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls) -4. [Управление](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls) -5. [Конец игры](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over) -6. [Построение поля кирпичей](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) -7. [Реакция при столкновении](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection) -8. [Счёт и выигрыш](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win) -9. [Контроль мышью](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls) -10. [Заключение](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up) +1. [Создание Canvas и рисование на нем](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it) +2. [Движение мяча](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball) +3. [Реакция при столкновении со стеной](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls) +4. [Управление](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls) +5. [Конец игры](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over) +6. [Построение поля кирпичей](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field) +7. [Реакция при столкновении](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) +8. [Счёт и выигрыш](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win) +9. [Контроль мышью](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls) +10. [Заключение](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up) Лучший способ получить надёжные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, нелишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript. > [!NOTE] -> Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей [2D игра Breakout с использованием Phaser](/ru/docs/Games/Workflows/2D_breakout_game_Phaser). +> Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей [2D игра Breakout с использованием Phaser](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser). > [!NOTE] > Эту серию статей можно использовать как материал для практических занятий по разработке игр. Также можно воспользоваться набором инструментов [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit), основанном на этом уроке, если нужно сделать доклад о разработке игр в целом. ## Следующий шаг -Ладно, давайте начнём! Перейдите к первой главе — [Создание Canvas и рисование на нем](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it). +Ладно, давайте начнём! Перейдите к первой главе — [Создание Canvas и рисование на нем](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it). {{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md index 1d447e8310527e..6e7500496b4f0f 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md @@ -5,13 +5,13 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Заключение")}} -Это 9-й шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код к этому уроку в [Gamedev-Canvas-workshop/lesson9.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html). +Это 9-й шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код к этому уроку в [Gamedev-Canvas-workshop/lesson9.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html). Сама игра на самом деле закончена, так что давайте отполируем её. Мы уже добавили элементы управления клавиатуру, но мы могли бы легко добавить элемент управления мышь. ## Отслеживание движений мыши -Отслеживание движений мыши ещё проще, чем обработка нажатий клавиш. Все, что нам нужно, это следить за событиями [`mousemove`](/ru/docs/Web/Events/mousemove). Добавьте следующую строку в том же месте, как и для других событий, чуть ниже `keyup event`: +Отслеживание движений мыши ещё проще, чем обработка нажатий клавиш. Все, что нам нужно, это следить за событиями [`mousemove`](/ru/docs/Web/API/Element/mousemove_event). Добавьте следующую строку в том же месте, как и для других событий, чуть ниже `keyup event`: ```js document.addEventListener("mousemove", mouseMoveHandler, false); @@ -44,6 +44,6 @@ function mouseMoveHandler(e) { ## Следующий шаг -Теперь у нас есть полная игра, мы закончим нашу серию уроков с ещё несколькими небольшими хитростями — [Finishing up](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up). +Теперь у нас есть полная игра, мы закончим нашу серию уроков с ещё несколькими небольшими хитростями — [Finishing up](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index c5970fb532b1ec..3f00aa1cbe5690 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Создание_Canvas_и_рисование_на_нём", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}} -Это **2й шаг** из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код для данного урока по ссылке [Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html). +Это **2й шаг** из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код для данного урока по ссылке [Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html). Из предыдущей статьи вы уже знаете, как нарисовать мяч, а сейчас давайте заставим его двигаться. Технически, мы будем рисовать мяч на экране, стирать его и рисовать заново на немного другой позиции каждый раз, чтобы создать эффект движения - точно так же, как это работает в фильмах. @@ -136,6 +136,6 @@ function draw() { ## Следующие шаги -Мы нарисовали мяч и заставили его двигаться, но он продолжает пропадать на краю canvas. В третьей части мы рассмотрим, как заставить его [отскакивать от стен](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Bounce_off_the_walls). +Мы нарисовали мяч и заставили его двигаться, но он продолжает пропадать на краю canvas. В третьей части мы рассмотрим, как заставить его [отскакивать от стен](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md index 872c0001ac1850..c3d34fd04f0ab1 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_contr {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over")}} -Это 4-й этап из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код как он должен выглядеть после завершения этого урока в [Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html). +Это 4-й этап из 10 [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код как он должен выглядеть после завершения этого урока в [Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html). Мяч беспрепятственно отражается от стен, и вы можете смотреть на него бесконечно, но в настоящее время нет интерактивности. Это не игра, если вы не можете управлять мячом. Давайте добавим взаимодействие с игрой: управление ракеткой. @@ -121,6 +121,6 @@ drawPaddle(); ## Следующий шаг -Теперь у нас есть что-то похожее на игру. Беда только в том, что пока вы можете лишь бесконечно бить мяч ракеткой. Это все изменится в пятой главе, [Game over](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Game_over), когда мы начнём добавлять конечное состояние для нашей игры. +Теперь у нас есть что-то похожее на игру. Беда только в том, что пока вы можете лишь бесконечно бить мяч ракеткой. Это все изменится в пятой главе, [Game over](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over), когда мы начнём добавлять конечное состояние для нашей игры. {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}} diff --git a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md index 30c8cfc9b72b8a..b6ebc87e9b92ff 100644 --- a/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md +++ b/files/ru/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win {{GamesSidebar}}{{PreviousNext("Games/Tutorials/2D_Breakout_game_pure_JavaScript/Обнаружение_столкновений", "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Управление_мышью")}} -Это 8й шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Workflows/Breakout_game_from_scratch). Вы можете найти исходный код для этого урока по ссылке [Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html). +Это 8й шаг из 10 в [Gamedev Canvas tutorial](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). Вы можете найти исходный код для этого урока по ссылке [Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html). Уничтожение кирпичей действительно классно, но, чтобы быть ещё более удивительным, игра должна присуждать очки за каждый кирпич, в который попадает игрок, и подсчитывать общий балл. @@ -102,6 +102,6 @@ function collisionDetection() { ## Следующие шаги -На данный момент игра выглядит довольно хорошо. В следующем уроке вы расширите привлекательность игры, добавив [Mouse controls](/ru/docs/Games/Workflows/Breakout_game_from_scratch/Mouse_controls). +На данный момент игра выглядит довольно хорошо. В следующем уроке вы расширите привлекательность игры, добавив [Mouse controls](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}} diff --git a/files/ru/games/tutorials/index.md b/files/ru/games/tutorials/index.md index 8c052b4da17bbc..1ababdad823ef8 100644 --- a/files/ru/games/tutorials/index.md +++ b/files/ru/games/tutorials/index.md @@ -7,11 +7,11 @@ slug: Games/Tutorials Эта страница содержит несколько серий уроков, в которых освещаются различные рабочие процессы для эффективного создания разных типов веб-игр. -- [2D игра Breakout на чистом JavaScript](/ru/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript) +- [2D игра Breakout на чистом JavaScript](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) - : В этом пошаговом руководстве вы сможете реализовать простой клон игры Breakout с использованием чистого JavaScript. Попутно вы узнаете основы использования элемента {{htmlelement ('canvas')}} для реализации фундаментальной игровой механики, такой как рендеринг и движущиеся изображения, обнаружение столкновения, механизмы управления и выигрышные и проигрышные состояния. -- [2D-игра Breakout с использованием Phaser](/ru/docs/Games/Workflows/2D_breakout_game_Phaser) +- [2D-игра Breakout с использованием Phaser](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser) - : В этом пошаговом руководстве вы будете использовать тот же самый клон Breakout, что и предыдущая серия уроков, за исключением того, что на этот раз вы сделаете это, используя HTML5 игровой фреймворк[Phaser](http://phaser.io/). Идея состоит в том, чтобы научить некоторым основам (и преимуществам) работы с фреймворками наряду с фундаментальной игровой механикой. -- [2D-игра Лабиринт с применением ориентации устройства](/ru/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation) - - : В этом учебном пособии показано, как создать 2D-игру Лабиринт с использованием HTML5, включая основы, такие как обнаружение столкновения и размещение спрайтов на {{htmlelement ('canvas')}}. Это мобильная игра, в которой используются **API** [Ориентация устройства](/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) и [Вибрация](/ru/docs/Web/Guide/API/Vibration) для улучшения игрового процесса и построенная с использованием фреймворка [Phaser](http://phaser.io/). +- [2D-игра Лабиринт с применением ориентации устройства](/ru/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation) + - : В этом учебном пособии показано, как создать 2D-игру Лабиринт с использованием HTML5, включая основы, такие как обнаружение столкновения и размещение спрайтов на {{htmlelement ('canvas')}}. Это мобильная игра, в которой используются **API** [Ориентация устройства](/ru/docs/Web/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) и [Вибрация](/ru/docs/Web/API/Vibration_API) для улучшения игрового процесса и построенная с использованием фреймворка [Phaser](http://phaser.io/). - [2D-игра платформер с использованием Phaser](https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/) - : В этой серии уроков показано, как создать простую платформенную игру с использованием [Phaser](http://phaser.io/), освещаются такие основы, как спрайты, столкновения, физика, коллекции и многое другое. diff --git a/files/ru/glossary/accessibility/index.md b/files/ru/glossary/accessibility/index.md index a3e28d7a3dd6c6..3d279a4768c369 100644 --- a/files/ru/glossary/accessibility/index.md +++ b/files/ru/glossary/accessibility/index.md @@ -16,10 +16,10 @@ _Веб-доступность_ (**A11Y**) — регламентирует лу ### Изучение доступности - [Изучение доступности на MDN](/ru/docs/Learn/Accessibility) -- [Web Accessibility In Mind](http://webaim.org/) +- [Web Accessibility In Mind](https://webaim.org/) ### Технические материалы - [ARIA документация на MDN](/ru/docs/Web/Accessibility/ARIA) -- [Инициатива по обеспечению доступности W3C](http://www.w3.org/WAI/) -- [WAI-ARIA рекомендации](http://www.w3.org/TR/wai-aria/) +- [Инициатива по обеспечению доступности W3C](https://www.w3.org/WAI/) +- [WAI-ARIA рекомендации](https://www.w3.org/TR/wai-aria/) diff --git a/files/ru/glossary/accessibility_tree/index.md b/files/ru/glossary/accessibility_tree/index.md index 6904e9fdb70ca1..6df93170d18369 100644 --- a/files/ru/glossary/accessibility_tree/index.md +++ b/files/ru/glossary/accessibility_tree/index.md @@ -7,7 +7,7 @@ slug: Glossary/Accessibility_tree **Дерево доступности** содержит информацию для большинства HTML-элементов, связанную с {{Glossary("Accessibility", "доступностью")}}. -Браузеры преобразуют разметку во внутреннее представление, называемое [DOM-деревом](/ru/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree). DOM-дерево содержит объекты для всех элементов разметки, атрибутов, текстовых узлов. После этого, на основе DOM-дерева, браузеры создают дерево доступности, которое используется платформозависимыми API специальных возможностей для вспомогательных технологий, таких как скринридеры. +Браузеры преобразуют разметку во внутреннее представление, называемое [DOM-деревом](/ru/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model). DOM-дерево содержит объекты для всех элементов разметки, атрибутов, текстовых узлов. После этого, на основе DOM-дерева, браузеры создают дерево доступности, которое используется платформозависимыми API специальных возможностей для вспомогательных технологий, таких как скринридеры. В объекте дерева доступности есть четыре элемента: diff --git a/files/ru/glossary/alignment_container/index.md b/files/ru/glossary/alignment_container/index.md index 023c16365f7193..aaef2e2b026c2c 100644 --- a/files/ru/glossary/alignment_container/index.md +++ b/files/ru/glossary/alignment_container/index.md @@ -9,4 +9,4 @@ slug: Glossary/Alignment_Container ## Дополнительные ресурсы -- [Выравнивание блоков в CSS](/ru/docs/Web/CSS/CSS_Box_Alignment) +- [Выравнивание блоков в CSS](/ru/docs/Web/CSS/CSS_box_alignment) diff --git a/files/ru/glossary/apple_safari/index.md b/files/ru/glossary/apple_safari/index.md index 4fdf5812c24790..ad5a4f95963990 100644 --- a/files/ru/glossary/apple_safari/index.md +++ b/files/ru/glossary/apple_safari/index.md @@ -5,16 +5,16 @@ slug: Glossary/Apple_Safari {{GlossarySidebar}} -[Safari](http://www.apple.com/safari/) (Сафари) - это {{Glossary("Browser","веб-браузер")}} разработанный компанией Apple, входит в состав операционных систем macOS и iOS. [Safari](http://www.apple.com/safari/) работает на движке [WebKit](http://www.webkit.org/). +[Safari](https://www.apple.com/safari/) (Сафари) - это {{Glossary("Browser","веб-браузер")}} разработанный компанией Apple, входит в состав операционных систем macOS и iOS. [Safari](https://www.apple.com/safari/) работает на движке [WebKit](https://www.webkit.org/). ## Узнайте больше ### Общая информация -- [Safari на сайте apple.com](http://www.apple.com/safari/) +- [Safari на сайте apple.com](https://www.apple.com/safari/) ### Техническая информация -- [Проект WebKit](http://www.webkit.org/) +- [Проект WebKit](https://www.webkit.org/) - [WebKit ночная сборка](http://nightly.webkit.org/) - [Сообщить об ошибке в Safari](https://bugs.webkit.org/) diff --git a/files/ru/glossary/arpa/index.md b/files/ru/glossary/arpa/index.md index 4721d22d82e0c4..5f88fa33c0e24f 100644 --- a/files/ru/glossary/arpa/index.md +++ b/files/ru/glossary/arpa/index.md @@ -11,4 +11,4 @@ slug: Glossary/ARPA ### Общие сведения -- [Официальный веб-сайт](http://www.iana.org/domains/arpa) +- [Официальный веб-сайт](https://www.iana.org/domains/arpa) diff --git a/files/ru/glossary/atag/index.md b/files/ru/glossary/atag/index.md index f3deb366594726..70a549009bfad9 100644 --- a/files/ru/glossary/atag/index.md +++ b/files/ru/glossary/atag/index.md @@ -15,5 +15,5 @@ ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines) - это {{Glossa ### Технические ссылки -- [Обзор Authoring Tool Accessibility Guidelines (ATAG)](http://www.w3.org/WAI/intro/atag.php) -- [Рекомендации ATAG 2.0](http://www.w3.org/TR/ATAG20/) +- [Обзор Authoring Tool Accessibility Guidelines (ATAG)](https://www.w3.org/WAI/intro/atag.php) +- [Рекомендации ATAG 2.0](https://www.w3.org/TR/ATAG20/) diff --git a/files/ru/glossary/base64/index.md b/files/ru/glossary/base64/index.md index 9bf81cae83119e..091a76e44cd598 100644 --- a/files/ru/glossary/base64/index.md +++ b/files/ru/glossary/base64/index.md @@ -7,7 +7,7 @@ slug: Glossary/Base64 **Base64** - это группа схожих [binary-to-text encoding](https://en.wikipedia.org/wiki/Binary-to-text_encoding) схем, которые представляют двоичные данные в ASCII-формате методом перевода в radix-64 представление. Термин _Base64_ происходит от a specific [MIME content transfer encoding](https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding). -Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту ([MIME](https://en.wikipedia.org/wiki/MIME)), и при сохранении больших объёмов данных в [XML](/ru/docs/XML). +Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту ([MIME](https://en.wikipedia.org/wiki/MIME)), и при сохранении больших объёмов данных в [XML](/ru/docs/Web/XML). В языке JavaScript существуют две функции, для кодирования и декодирования данных в/из формат Base64 соответственно: @@ -20,15 +20,15 @@ slug: Glossary/Base64 ## Документация -- [`data` URIs](/ru/docs/data_URIs) - - : `data` URIs, описанные в [RFC 2397](http://tools.ietf.org/html/rfc2397), позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном). +- [`data` URIs](/ru/docs/Web/URI/Schemes/data) + - : `data` URIs, описанные в [RFC 2397](https://tools.ietf.org/html/rfc2397), позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном). - [Base64](https://en.wikipedia.org/wiki/Base64) - : Wikipedia article about Base64 encoding. - {{domxref("WindowBase64.atob","atob()")}} - : Decodes a string of data which has been encoded using base-64 encoding. - {{domxref("WindowBase64.btoa","btoa()")}} - : Creates a base-64 encoded ASCII string from a "string" of binary data. -- [The "Unicode Problem"](#The_Unicode_Problem) +- [The "Unicode Problem"](#the_unicode_problem) - : In most browsers, calling `btoa()` on a Unicode string will cause a `Character Out Of Range` exception. This paragraph shows some solutions. - [URIScheme](/ru/docs/URIScheme) - : List of Mozilla supported URI schemes @@ -36,7 +36,7 @@ slug: Glossary/Base64 - : In this article is published a library of ours whose aims are: - - creating a [C](http://en.wikipedia.org/wiki/C_%28programming_language%29)-like interface for strings (i.e. array of characters codes — [`ArrayBufferView`](/ru/docs/Web/JavaScript/Typed_arrays/ArrayBufferView) in JavaScript) based upon the JavaScript [`ArrayBuffer`](/ru/docs/Web/JavaScript/Typed_arrays/ArrayBuffer) interface, + - creating a [C](http://en.wikipedia.org/wiki/C_%28programming_language%29)-like interface for strings (i.e. array of characters codes — [`ArrayBufferView`](/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) in JavaScript) based upon the JavaScript [`ArrayBuffer`](/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) interface, - creating a collection of methods for such string-like objects (since now: `stringView`s) which work **strictly on array of numbers** rather than on immutable JavaScript strings, - working with other Unicode encodings, different from default JavaScript's UTF-16 [`DOMString`](/ru/docs/Web/API/DOMString)s, @@ -47,13 +47,13 @@ slug: Glossary/Base64 ## Related Topics -- [`ArrayBuffer`](/ru/docs/Web/JavaScript/Typed_arrays/ArrayBuffer) -- [Typed arrays](/ru/docs/Web/JavaScript/Typed_arrays) -- [`ArrayBufferView`](/ru/docs/Web/JavaScript/Typed_arrays/ArrayBufferView) -- [`Uint8Array`](/ru/docs/Web/JavaScript/Typed_arrays/Uint8Array) +- [`ArrayBuffer`](/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) +- [Typed arrays](/ru/docs/Web/JavaScript/Guide/Typed_arrays) +- [`ArrayBufferView`](/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) +- [`Uint8Array`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) - [`StringView` – a C-like representation of strings based on typed arrays](/ru/docs/Web/JavaScript/Typed_arrays/StringView) - [`DOMString`](/ru/docs/Web/API/DOMString) -- [`URI`](/ru/docs/URI) +- [`URI`](/ru/docs/Glossary/URI) - [`encodeURI()`](/ru/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) ## The "Unicode Problem" diff --git a/files/ru/glossary/baseline/index.md b/files/ru/glossary/baseline/index.md index fcdc0a5e6d4e19..7ae423beaeb115 100644 --- a/files/ru/glossary/baseline/index.md +++ b/files/ru/glossary/baseline/index.md @@ -19,4 +19,4 @@ slug: Glossary/Baseline ### Техническая документация -- [CSS Box Alignment](/ru/Web/CSS/CSS_Box_Alignment#Типы_выравнивания) на MDN +- [CSS Box Alignment](/ru/docs/Web/CSS/CSS_Box_Alignment#типы_выравнивания) на MDN diff --git a/files/ru/glossary/bigint/index.md b/files/ru/glossary/bigint/index.md index 51b58a3cf6cfbe..ec698cd758755c 100644 --- a/files/ru/glossary/bigint/index.md +++ b/files/ru/glossary/bigint/index.md @@ -11,5 +11,5 @@ slug: Glossary/BigInt ### Техническая документация -- Структура данных JavaScript: [`BigInt`](/ru/docs/Web/JavaScript/Data_structures#BigInt_type) +- Структура данных JavaScript: [`BigInt`](/ru/docs/Web/JavaScript/Data_structures#bigint_type) - Глобальный объект JavaScript {{jsxref("BigInt")}} diff --git a/files/ru/glossary/block-level_content/index.md b/files/ru/glossary/block-level_content/index.md index 4a42599d8272b1..5394885892ffda 100644 --- a/files/ru/glossary/block-level_content/index.md +++ b/files/ru/glossary/block-level_content/index.md @@ -43,7 +43,7 @@ p { - Форматирование по умолчанию - : По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки. -Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором [категорий контента](/ru/docs/Web/Guide/HTML/Content_categories). Категория «строчных» элементов примерно соответствует категории [текстового контента](/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content), а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории [потокового контента](/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток) в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент. +Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором [категорий контента](/ru/docs/Web/HTML/Content_categories). Категория «строчных» элементов примерно соответствует категории [текстового контента](/ru/docs/Web/HTML/Content_categories#phrasing_content), а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории [потокового контента](/ru/docs/Web/HTML/Content_categories#основной_поток) в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент. ## Элементы diff --git a/files/ru/glossary/block/css/index.md b/files/ru/glossary/block/css/index.md index 3bca4b891b05a1..e7e9611f4feaac 100644 --- a/files/ru/glossary/block/css/index.md +++ b/files/ru/glossary/block/css/index.md @@ -13,4 +13,4 @@ slug: Glossary/Block/CSS ### Общая информация -- [Visual formatting model](/ru/docs/Web/Guide/CSS/Visual_formatting_model) +- [Visual formatting model](/ru/docs/Web/CSS/Visual_formatting_model) diff --git a/files/ru/glossary/browser/index.md b/files/ru/glossary/browser/index.md index 47af599607b2ef..41a59d491a9b5a 100644 --- a/files/ru/glossary/browser/index.md +++ b/files/ru/glossary/browser/index.md @@ -15,7 +15,7 @@ _Веб браузер —_ это программа которая извле ### Скачай браузер -- [Mozilla Firefox](http://www.mozilla.org/en-US/firefox/features/) -- [Google Chrome](http://www.google.com/chrome/) -- [Microsoft Internet Explorer](http://windows.microsoft.com/en-US/internet-explorer/browser-ie) -- [Opera Browser](http://www.opera.com/) +- [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/features/) +- [Google Chrome](https://www.google.com/chrome/) +- [Microsoft Internet Explorer](https://windows.microsoft.com/en-US/internet-explorer/browser-ie) +- [Opera Browser](https://www.opera.com/) diff --git a/files/ru/glossary/callback_function/index.md b/files/ru/glossary/callback_function/index.md index 9b5fc997fe0461..8f6d83918762b9 100644 --- a/files/ru/glossary/callback_function/index.md +++ b/files/ru/glossary/callback_function/index.md @@ -41,7 +41,7 @@ function onPageLoadingFinished(pageData) { pageLoader(onPageLoadingFinished); ``` -Вот ещё один пример асинхронного обратного вызова: [maps-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html) ([живой пример](http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html)). Он использует Google Maps API и Geolocation API для отображения карты текущего местоположения вашего устройства. +Вот ещё один пример асинхронного обратного вызова: [maps-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html) ([живой пример](https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html)). Он использует Google Maps API и Geolocation API для отображения карты текущего местоположения вашего устройства. ```js // maps-example.html diff --git a/files/ru/glossary/canvas/index.md b/files/ru/glossary/canvas/index.md index 3a692113862824..03ae9b5c02001e 100644 --- a/files/ru/glossary/canvas/index.md +++ b/files/ru/glossary/canvas/index.md @@ -11,11 +11,11 @@ slug: Glossary/Canvas ### Обучающие ресурсы -- [Руководство по Canvas в MDN](/ru/docs/Web/Guide/HTML/Canvas_tutorial) +- [Руководство по Canvas в MDN](/ru/docs/Web/API/Canvas_API/Tutorial) ### Техническая информация - HTML-элемент {{HTMLElement("canvas")}} в MDN -- [Canvas общая документация в MDN](/ru/docs/HTML/Canvas) +- [Canvas общая документация в MDN](/ru/docs/Web/API/Canvas_API) - {{domxref("CanvasRenderingContext2D")}}: Canvas 2D API для рисования -- [Canvas 2D API спецификация](http://www.w3.org/TR/2dcontext/) +- [Canvas 2D API спецификация](https://www.w3.org/TR/2dcontext/) diff --git a/files/ru/glossary/class/index.md b/files/ru/glossary/class/index.md index 1c0f394d087583..4a8e2ce79cd487 100644 --- a/files/ru/glossary/class/index.md +++ b/files/ru/glossary/class/index.md @@ -13,7 +13,7 @@ slug: Glossary/Class ### Общие знания -- [Языки, основанные на классах против прототипно-ориентированных](/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model) +- [Языки, основанные на классах против прототипно-ориентированных](/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) - [Классы в JavaScript](/ru/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) - [Class-based programming](https://en.wikipedia.org/wiki/Class-based_programming) в Википедии (англ.) - [Объектно-ориентированное программирование](https://ru.wikipedia.org/wiki/Объектно-ориентированное_программирование) в Википедии diff --git a/files/ru/glossary/codec/index.md b/files/ru/glossary/codec/index.md index 6aa57650b6aebc..8131972f99b30d 100644 --- a/files/ru/glossary/codec/index.md +++ b/files/ru/glossary/codec/index.md @@ -11,4 +11,4 @@ slug: Glossary/Codec ### Технические ссылки -- [Медиа форматы, поддерживаемые audio и video элементами HTML](/ru/docs/Web/HTML/Supported_media_formats) +- [Медиа форматы, поддерживаемые audio и video элементами HTML](/ru/docs/Web/Media/Formats) diff --git a/files/ru/glossary/compile/index.md b/files/ru/glossary/compile/index.md index f90cc77462f14c..1e59bc0af90cc3 100644 --- a/files/ru/glossary/compile/index.md +++ b/files/ru/glossary/compile/index.md @@ -22,4 +22,4 @@ JIT компиляторы обычно прозрачны для вас и ис ### Обучающие ресурсы - [Введение в компиляторы](https://medium.com/basecs/a-deeper-inspection-into-compilation-and-interpretation-d98952ebc842) -- [Большой список учебных материалов на StackOverflow](http://stackoverflow.com/a/1672/133203) +- [Большой список учебных материалов на StackOverflow](https://stackoverflow.com/a/1672/133203) diff --git a/files/ru/glossary/constructor/index.md b/files/ru/glossary/constructor/index.md index 84400bbd6a7ecc..18742868d73155 100644 --- a/files/ru/glossary/constructor/index.md +++ b/files/ru/glossary/constructor/index.md @@ -32,5 +32,5 @@ var defaultReference = new Default(); ## Смотрите также -- [Конструктор в ООП для JavaScript](/ru/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_Constructor) на MDN +- [Конструктор в ООП для JavaScript](/ru/docs/Learn/JavaScript/Objects#the_constructor) на MDN - [Оператор new в JavaScript](/ru/docs/Web/JavaScript/Reference/Operators/new) на MDN diff --git a/files/ru/glossary/cors/index.md b/files/ru/glossary/cors/index.md index 2b0a1961385086..781a9cd90b47b5 100644 --- a/files/ru/glossary/cors/index.md +++ b/files/ru/glossary/cors/index.md @@ -13,7 +13,7 @@ The [same-origin security policy (рус. "правило ограничения ### Основная база знаний -- [HTTP access control (CORS)](/ru/docs/Web/HTTP/Access_control_CORS) на MDN +- [HTTP access control (CORS)](/ru/docs/Web/HTTP/CORS) на MDN ### CORS заголовки diff --git a/files/ru/glossary/csrf/index.md b/files/ru/glossary/csrf/index.md index 594ed922fb550d..eddf4e5f79136b 100644 --- a/files/ru/glossary/csrf/index.md +++ b/files/ru/glossary/csrf/index.md @@ -12,4 +12,4 @@ slug: Glossary/CSRF ### General knowledge - [Prevention measures]() -- [MDN security tutorial](/en-US/Learn/tutorial/Information_Security_Basics) +- [MDN security tutorial](/ru/docs/Learn/tutorial/Information_Security_Basics) diff --git a/files/ru/glossary/css/index.md b/files/ru/glossary/css/index.md index 6d3a537b41e501..8036978db47ba8 100644 --- a/files/ru/glossary/css/index.md +++ b/files/ru/glossary/css/index.md @@ -33,9 +33,9 @@ p { ### Техническая документация - [CSS документация на MDN](/ru/docs/Web/CSS) -- [Рабочая группа CSS по текущей работе](http://www.w3.org/Style/CSS/current-work) +- [Рабочая группа CSS по текущей работе](https://www.w3.org/Style/CSS/current-work) ### Веб-курсы CSS -- [Веб курсы на codecademy.com](http://www.codecademy.com/en/tracks/web) +- [Веб курсы на codecademy.com](https://www.codecademy.com/en/tracks/web) - [Веб курсы на W3Schools](http://www.w3schools.com/css/default.asp) diff --git a/files/ru/glossary/css_preprocessor/index.md b/files/ru/glossary/css_preprocessor/index.md index 2286dfb5cfd9ed..4aa66500e23ff1 100644 --- a/files/ru/glossary/css_preprocessor/index.md +++ b/files/ru/glossary/css_preprocessor/index.md @@ -15,7 +15,7 @@ CSS препроцессор (**CSS preprocessor**) - это программа, Несколько самых популярных CSS препоцессоров: -- [SASS](http://sass-lang.com/) -- [LESS](http://lesscss.org/) +- [SASS](https://sass-lang.com/) +- [LESS](https://lesscss.org/) - [Stylus](http://stylus-lang.com/) - [PostCSS](http://postcss.org/) diff --git a/files/ru/glossary/css_selector/index.md b/files/ru/glossary/css_selector/index.md index 02cff06bcd1c14..0b258f9cf06cca 100644 --- a/files/ru/glossary/css_selector/index.md +++ b/files/ru/glossary/css_selector/index.md @@ -46,10 +46,10 @@ p { 3. Комбинаторы - 1. [Adjacent sibling selectors](/ru/docs/Web/CSS/Adjacent_sibling_selectors) `A + B` - 2. [General sibling selectors](/ru/docs/Web/CSS/General_sibling_selectors) `A ~ B` - 3. [Child selectors](/ru/docs/Web/CSS/Child_selectors) `A > B` - 4. [Descendant selectors](/ru/docs/Web/CSS/Descendant_selectors) `A B` + 1. [Adjacent sibling selectors](/ru/docs/Web/CSS/Next-sibling_combinator) `A + B` + 2. [General sibling selectors](/ru/docs/Web/CSS/Subsequent-sibling_combinator) `A ~ B` + 3. [Child selectors](/ru/docs/Web/CSS/Child_combinator) `A > B` + 4. [Descendant selectors](/ru/docs/Web/CSS/Descendant_combinator) `A B` 4. Псевдо diff --git a/files/ru/glossary/developer_tools/index.md b/files/ru/glossary/developer_tools/index.md index e7140b3f574376..ac220e584e0bd5 100644 --- a/files/ru/glossary/developer_tools/index.md +++ b/files/ru/glossary/developer_tools/index.md @@ -11,7 +11,7 @@ slug: Glossary/Developer_Tools ### Technical reference -- [Firefox Developer Tools](/ru/docs/Tools) on MDN +- [Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/index.html) on MDN - [Firebug](https://getfirebug.com/) (former developer tool for Firefox) - [Chrome DevTools](https://developer.chrome.com/docs/devtools/) on chrome.com - [Safari Web Inspector](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874-CH1-SW1) on apple.com diff --git a/files/ru/glossary/dns/index.md b/files/ru/glossary/dns/index.md index dcec64d6808ed4..b6dd3357fb3548 100644 --- a/files/ru/glossary/dns/index.md +++ b/files/ru/glossary/dns/index.md @@ -15,4 +15,4 @@ slug: Glossary/DNS ### Общие знания -- [Что такое доменные адреса](/ru/docs/Learn/Understanding_domain_names) +- [Что такое доменные адреса](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/ru/glossary/doctype/index.md b/files/ru/glossary/doctype/index.md index 264844b5aa0385..42d0431974437d 100644 --- a/files/ru/glossary/doctype/index.md +++ b/files/ru/glossary/doctype/index.md @@ -7,12 +7,12 @@ l10n: {{GlossarySidebar}} -В {{Glossary("HTML")}} необходимо объявлять **тип документа** с помощью строки `` в самом начале каждого документа. Единственная цель этого — не допустить переключения {{Glossary("browser", "браузера")}} в так называемый режим совместимости («[quirks mode](/ru/docs/Quirks_Mode_and_Standards_Mode)») во время рендеринга документа. Указание типа документа с помощью `` гарантирует, что браузер будет следовать соответствующей спецификации, а не использовать другой режим отображения, несовместимый с некоторыми спецификациями. +В {{Glossary("HTML")}} необходимо объявлять **тип документа** с помощью строки `` в самом начале каждого документа. Единственная цель этого — не допустить переключения {{Glossary("browser", "браузера")}} в так называемый режим совместимости («[quirks mode](/ru/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)») во время рендеринга документа. Указание типа документа с помощью `` гарантирует, что браузер будет следовать соответствующей спецификации, а не использовать другой режим отображения, несовместимый с некоторыми спецификациями. Объявление типа документа не чувствительно к регистру. В примерах кода на MDN принято использовать строчные буквы, но и вариант записи `` тоже корректный. ## Смотрите также - [Определение DOCTYPE в спецификации HTML](https://html.spec.whatwg.org/multipage/syntax.html#the-doctype) -- [Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)](/ru/docs/Quirks_Mode_and_Standards_Mode) +- [Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)](/ru/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) - [Document.doctype](/ru/docs/Web/API/Document/doctype) — метод JavaScript, возвращающий тип документа diff --git a/files/ru/glossary/dom/index.md b/files/ru/glossary/dom/index.md index 9ef7ef1f943d90..63806bdfa26b7e 100644 --- a/files/ru/glossary/dom/index.md +++ b/files/ru/glossary/dom/index.md @@ -15,5 +15,5 @@ DOM не был определён изначально — он пришёл к ### Техническая информация -- [Документация DOM на MDN](/ru/docs/DOM) -- [Различные спецификации DOM на сайте W3C](http://www.w3.org/DOM/DOMTR) +- [Документация DOM на MDN](/ru/docs/Web/API/Document_Object_Model) +- [Различные спецификации DOM на сайте W3C](https://www.w3.org/DOM/DOMTR) diff --git a/files/ru/glossary/domain_name/index.md b/files/ru/glossary/domain_name/index.md index 8a723f218e41e6..26fbd2250377d1 100644 --- a/files/ru/glossary/domain_name/index.md +++ b/files/ru/glossary/domain_name/index.md @@ -11,4 +11,4 @@ slug: Glossary/Domain_name ### Общие сведения -- [Understanding domain names](/en-US/Learn/Understanding_domain_names) +- [Understanding domain names](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/ru/glossary/ecma/index.md b/files/ru/glossary/ecma/index.md index 79b1edd6bdd816..412ccbc5e22db5 100644 --- a/files/ru/glossary/ecma/index.md +++ b/files/ru/glossary/ecma/index.md @@ -7,8 +7,8 @@ slug: Glossary/ECMA **Ecma International**, ранее известная как European Computers Manufactures Association (Европейская Ассоциация Производителей Компьютеров) — некоммерческая организация, утверждающая и развивающая стандарты в областях аппаратного обеспечения компьютеров, коммуникационных технологий и языков программирования. -В интернете она прежде всего известна, как организация, утвердившая [спецификацию ECMA-262](http://www.ecma-international.org/publications/standards/Ecma-262.htm) (она же {{Glossary("ECMAScript")}}), являющуюся основной спецификацией языка {{Glossary("JavaScript")}}. +В интернете она прежде всего известна, как организация, утвердившая [спецификацию ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm) (она же {{Glossary("ECMAScript")}}), являющуюся основной спецификацией языка {{Glossary("JavaScript")}}. ## Узнать больше -- [Официальный сайт Ecma International](http://www.ecma-international.org/) +- [Официальный сайт Ecma International](https://www.ecma-international.org/) diff --git a/files/ru/glossary/ecmascript/index.md b/files/ru/glossary/ecmascript/index.md index 3f6407185d67f1..5e926f6263d938 100644 --- a/files/ru/glossary/ecmascript/index.md +++ b/files/ru/glossary/ecmascript/index.md @@ -5,7 +5,7 @@ slug: Glossary/ECMAScript {{GlossarySidebar}} -**ECMAScript** - это скриптовый язык на котором основан {{glossary("JavaScript")}}. [Ecma International](http://www.ecma-international.org) - организация отвечающая за стандартизацию ECMAScript. +**ECMAScript** - это скриптовый язык на котором основан {{glossary("JavaScript")}}. [Ecma International](https://www.ecma-international.org) - организация отвечающая за стандартизацию ECMAScript. ## Learn more diff --git a/files/ru/glossary/element/index.md b/files/ru/glossary/element/index.md index 521daf1b2152ff..13d785d197d643 100644 --- a/files/ru/glossary/element/index.md +++ b/files/ru/glossary/element/index.md @@ -14,4 +14,4 @@ slug: Glossary/Element - Интерфейс {{domxref("Element")}}, представляющий элемент в DOM. - [Подробнее об элементах](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B). -- [Web_Components/Custom_Elements](/ru/docs/Web/Web_Components/Custom_Elements) +- [Web_Components/Custom_Elements](/ru/docs/Web/API/Web_components/Using_custom_elements) diff --git a/files/ru/glossary/entity_header/index.md b/files/ru/glossary/entity_header/index.md index 316f179a48dee1..dfc914007c441f 100644 --- a/files/ru/glossary/entity_header/index.md +++ b/files/ru/glossary/entity_header/index.md @@ -22,4 +22,4 @@ Content-Length: 128 ### Технические знания -- [Список всех HTTP заголовков](/ru/docs/Web/HTTP/Заголовки) +- [Список всех HTTP заголовков](/ru/docs/Web/HTTP/Headers) diff --git a/files/ru/glossary/falsy/index.md b/files/ru/glossary/falsy/index.md index 422af370bb1307..b6c73121a1f305 100644 --- a/files/ru/glossary/falsy/index.md +++ b/files/ru/glossary/falsy/index.md @@ -18,7 +18,7 @@ slug: Glossary/Falsy | `-0` | Отрицательный ноль типа {{jsxref("Number")}} (к нему также относятся `-0.0`, `-0x0` и т.д.). | | `0n` | Ноль типа {{jsxref("BigInt")}} (также `0x0n`). Обратите внимание, что не может быть негативного нуля типа {{jsxref("BigInt")}} — отрицательный `0n` равняется `0n`. | | `""`, `''`, ` `` ` | Значение, содержащее пустую [строку](/ru/docs/Web/JavaScript/Reference/Global_Objects/String) . | -| {{Glossary("null")}} | [null](/ru/docs/Web/JavaScript/Reference/Global_Objects/null) — отсутствие какого-либо значения. | +| {{Glossary("null")}} | [null](/ru/docs/Web/JavaScript/Reference/Operators/null) — отсутствие какого-либо значения. | | {{Glossary("undefined")}} | [undefined](/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined) — примитивное значение. | | {{Glossary("NaN")}} | [NaN](/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN) — значение, не являющиеся числом. | | {{domxref("document.all")}} | Объекты считаются ложноподобными тогда и только тогда, когда у них есть внутренний слот [\[\[IsHTMLDDA\]\]](https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot). Этот слот есть только в объекте {{domxref("document.all")}}, и его нельзя задать через JavaScript. | diff --git a/files/ru/glossary/first_contentful_paint/index.md b/files/ru/glossary/first_contentful_paint/index.md index 68039e6fe70683..1a15822343ab6c 100644 --- a/files/ru/glossary/first_contentful_paint/index.md +++ b/files/ru/glossary/first_contentful_paint/index.md @@ -11,5 +11,5 @@ slug: Glossary/First_contentful_paint ## Смотрите также -- [First Meaningful Paint](/ru/docs/Glossary/first_meaningful_paint) +- [First Meaningful Paint](/ru/docs/Glossary/First_meaningful_paint) - [Paint Timing specification](https://w3c.github.io/paint-timing/#first-contentful-paint) diff --git a/files/ru/glossary/first_input_delay/index.md b/files/ru/glossary/first_input_delay/index.md index faf822d8d8f02a..afcd0779882dec 100644 --- a/files/ru/glossary/first_input_delay/index.md +++ b/files/ru/glossary/first_input_delay/index.md @@ -7,9 +7,9 @@ slug: Glossary/First_input_delay **Задержка первого ввода** (англ. First input delay, FID) - одна из метрик производительности веб-страниц, которая описывает время, которое прошло с момента, когда пользователь впервые начал взаимодействовать с веб-страницей, т.е. нажал на ссылку, кнопку или использует элемент управления на основе JavaScript, до момента, когда веб-браузер может ответить на данное взаимодействие. Таким образом, это промежуток времени в миллисекундах между первым взаимодействием пользователя с веб-страницей и ответом браузера на это взаимодействие. Прокрутка и масштабирование не включены в этот показатель. -Время между моментом, когда содержимое отображается на странице, и моментом, когда все функциональные возможности становятся реагирующими на взаимодействие с человеком, часто варьируется в зависимости от размера и сложности JavaScript, который необходимо загрузить, проанализировать и выполнить в основном потоке. Оно зависит также и от возможности устройства, на котором выполняется JavaScript (подумайте о недорогих мобильных устройствах). Чем дольше задержка, тем хуже пользовательский опыт. Сокращение времени инициализации сайта и устранение [долгих задач](/ru/docs/Web/API/Long_Tasks_API) может помочь устранить первые задержки ввода. +Время между моментом, когда содержимое отображается на странице, и моментом, когда все функциональные возможности становятся реагирующими на взаимодействие с человеком, часто варьируется в зависимости от размера и сложности JavaScript, который необходимо загрузить, проанализировать и выполнить в основном потоке. Оно зависит также и от возможности устройства, на котором выполняется JavaScript (подумайте о недорогих мобильных устройствах). Чем дольше задержка, тем хуже пользовательский опыт. Сокращение времени инициализации сайта и устранение [долгих задач](/ru/docs/Web/API/PerformanceLongTaskTiming) может помочь устранить первые задержки ввода. ## Смотрите также - [requestIdleCallback](/ru/docs/Web/API/Window/requestIdleCallback) -- [lazy loading](/ru/docs/Learn/Performance/Lazy_loading) +- [lazy loading](/ru/docs/Web/Performance/Lazy_loading) diff --git a/files/ru/glossary/first_paint/index.md b/files/ru/glossary/first_paint/index.md index 0849b04ea5767a..95802e335712ac 100644 --- a/files/ru/glossary/first_paint/index.md +++ b/files/ru/glossary/first_paint/index.md @@ -9,6 +9,6 @@ slug: Glossary/First_paint ## Смотрите также -- [First meaningful paint](/ru/docs/Glossary/first_meaningful_paint) +- [First meaningful paint](/ru/docs/Glossary/First_meaningful_paint) - [First contentful paint](/ru/docs/Glossary/First_contentful_paint) -- [Paint Timing API](/ru/docs/) +- [Paint Timing API](/ru/docs/Web) diff --git a/files/ru/glossary/flex_item/index.md b/files/ru/glossary/flex_item/index.md index 140e4d87e67cb3..f195051120c21d 100644 --- a/files/ru/glossary/flex_item/index.md +++ b/files/ru/glossary/flex_item/index.md @@ -21,6 +21,6 @@ slug: Glossary/Flex_Item ### Читать далее -- Руководство по флексбоксу: [Основные понятия флексбокса](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox). +- Руководство по флексбоксу: [Основные понятия флексбокса](/ru/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox). - Руководство по флексбоксу: _[Ordering flex items](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_ - Руководство по флексбоксу: [Управление соотношением элементов вдоль главной оси](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси) diff --git a/files/ru/glossary/grid_column/index.md b/files/ru/glossary/grid_column/index.md index 8f404cb9a37c10..f2e4d311b491aa 100644 --- a/files/ru/glossary/grid_column/index.md +++ b/files/ru/glossary/grid_column/index.md @@ -5,11 +5,11 @@ slug: Glossary/Grid_Column {{GlossarySidebar}} -Столбец сетки (**grid column)** — это вертикальный элемент в [CSS Grid Layout](/ru/docs/Web/CSS/CSS_Grid_Layout), а также пространство между двумя вертикальными линиями сетки. Он определяется свойством {{cssxref("grid-template-columns")}}, либо в сокращённом виде {{cssxref("grid")}} или {{cssxref("grid-template")}}. +Столбец сетки (**grid column)** — это вертикальный элемент в [CSS Grid Layout](/ru/docs/Web/CSS/CSS_grid_layout), а также пространство между двумя вертикальными линиями сетки. Он определяется свойством {{cssxref("grid-template-columns")}}, либо в сокращённом виде {{cssxref("grid")}} или {{cssxref("grid-template")}}. Кроме того, столбцы могут быть созданы в неявном виде (_implicit grid),_ когда элементы расположены за пределами столбцов, созданных в явно-заданной сетке (_explicit grid)_. Размер этих столбцов будет подобран автоматически, либо задан с помощью свойства {{cssxref("grid-auto-columns")}}. -При работе с выравниванием в [CSS Grid Layout](/ru/docs/Web/CSS/CSS_Grid_Layout), ось, идущая вниз, вдоль которой идут столбцы, также называется осью блоков или столбцов. +При работе с выравниванием в [CSS Grid Layout](/ru/docs/Web/CSS/CSS_grid_layout), ось, идущая вниз, вдоль которой идут столбцы, также называется осью блоков или столбцов. ## Смотрите также @@ -22,4 +22,4 @@ slug: Glossary/Grid_Column ### Дальнейшая информация -- CSS Grid Layout Guide: _[Basic concepts of grid layout](/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)_ +- CSS Grid Layout Guide: _[Basic concepts of grid layout](/ru/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_ diff --git a/files/ru/glossary/html/index.md b/files/ru/glossary/html/index.md index c6a554b1d0e709..7739226f66b9fc 100644 --- a/files/ru/glossary/html/index.md +++ b/files/ru/glossary/html/index.md @@ -33,4 +33,4 @@ HTML принято сохранять с расширением `.htm` или ` ### Техническая справка - [Документация HTML на MDN](/ru/docs/Web/HTML) -- [Спецификация HTML](http://www.w3.org/TR/html5/) +- [Спецификация HTML](https://www.w3.org/TR/html5/) diff --git a/files/ru/glossary/iife/index.md b/files/ru/glossary/iife/index.md index 5e6147e902813e..ed007cdfb3270a 100644 --- a/files/ru/glossary/iife/index.md +++ b/files/ru/glossary/iife/index.md @@ -45,4 +45,4 @@ result; // "Barry" ### Материалы - [Ben Alman's blog post defining IIFEs](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) -- [Quick example](/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Functions) (в конце абзаца "Functions", сразу после "Custom objects") +- [Quick example](/ru/docs/Web/JavaScript/Language_overview#functions) (в конце абзаца "Functions", сразу после "Custom objects") diff --git a/files/ru/glossary/isp/index.md b/files/ru/glossary/isp/index.md index f01dd5250cc54c..8a2a1bec8b0260 100644 --- a/files/ru/glossary/isp/index.md +++ b/files/ru/glossary/isp/index.md @@ -11,4 +11,4 @@ ISP (Интернет-провайдер) продаёт доступ к инт ### Общие знания -- [Как работает Интернет](/ru/docs/Learn/How_the_Internet_works) (объяснение для новичков) +- [Как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) (объяснение для новичков) diff --git a/files/ru/glossary/javascript/index.md b/files/ru/glossary/javascript/index.md index 0eb38e77ceaa61..1a5eee98ca9bbd 100644 --- a/files/ru/glossary/javascript/index.md +++ b/files/ru/glossary/javascript/index.md @@ -5,7 +5,7 @@ slug: Glossary/JavaScript {{GlossarySidebar}} -JavaScript (JS) это язык программирования, который в основном используется для создания динамических скриптов на веб-страницах, но он так же часто применяется на стороне {{Glossary("Server", "сервера")}}, используя пакеты, такие как [Node.JS](http://nodejs.org/). +JavaScript (JS) это язык программирования, который в основном используется для создания динамических скриптов на веб-страницах, но он так же часто применяется на стороне {{Glossary("Server", "сервера")}}, используя пакеты, такие как [Node.JS](https://nodejs.org/). JavaScript не следует путать с [Java](https://ru.wikipedia.org/wiki/Java). «Java» и «JavaScript» являются товарными знаками или зарегистрированными товарными знаками Oracle в США и других странах. Тем не менее, два языка программирования существенно различаются по синтаксису, семантике и использованию. @@ -15,7 +15,7 @@ JavaScript не следует путать с [Java](https://ru.wikipedia.org/w JavaScript в основном используется в браузере, что позволяет разработчикам манипулировать содержимым веб-страницы с помощью {{Glossary("DOM")}}, данными с помощью {{Glossary("AJAX")}} и {{Glossary("IndexedDB")}}, рисовать графику с помощью {{Glossary("canvas")}}, взаимодействовать с устройством под управлением браузера через различные {{Glossary("API","APIs")}} и т.д. JavaScript является одним из наиболее часто используемых языков в мире благодаря недавнему росту и повышению производительности доступных в браузерах {{Glossary ("API", "APIs")}}. -В последнее время популярность JavaScript расширилась ещё больше благодаря успешной платформе [Node.js](http://nodejs.org/) - самой популярной кроссплатформенной среде выполнения JavaScript вне браузера. Node.js позволяет разработчикам использовать JavaScript в качестве языка сценариев для автоматизации работы на ПК и создания полнофункциональных {{Glossary ("HTTP")}} и {{Glossary ("WebSockets")}} серверов. +В последнее время популярность JavaScript расширилась ещё больше благодаря успешной платформе [Node.js](https://nodejs.org/) - самой популярной кроссплатформенной среде выполнения JavaScript вне браузера. Node.js позволяет разработчикам использовать JavaScript в качестве языка сценариев для автоматизации работы на ПК и создания полнофункциональных {{Glossary ("HTTP")}} и {{Glossary ("WebSockets")}} серверов. ## Узнай больше @@ -23,11 +23,11 @@ JavaScript в основном используется в браузере, ч - [Руководство JavaScript](/ru/docs/Web/JavaScript/Guide) на MDN - [The "javascripting" workshop on NodeSchool](http://nodeschool.io/#workshoppers) -- [Курс JavaScript на codecademy.com](http://www.codecademy.com/tracks/javascript) +- [Курс JavaScript на codecademy.com](https://www.codecademy.com/tracks/javascript) - [John Resig's Learning Advanced JavaScript](http://ejohn.org/apps/learn/) ### Технический справочник -- [Последний стандарт ECMAScript](http://www.ecma-international.org/publications/standards/Ecma-262.htm) -- [Справочник по JavaScript](/ru/docs/Web/JavaScript/reference) на MDN -- [The _Eloquent JavaScript_ book](http://eloquentjavascript.net/) +- [Последний стандарт ECMAScript](https://www.ecma-international.org/publications/standards/Ecma-262.htm) +- [Справочник по JavaScript](/ru/docs/Web/JavaScript/Reference) на MDN +- [The _Eloquent JavaScript_ book](https://eloquentjavascript.net/) diff --git a/files/ru/glossary/main_axis/index.md b/files/ru/glossary/main_axis/index.md index 2ad4e066d2e5ec..0cb7c7577d59dd 100644 --- a/files/ru/glossary/main_axis/index.md +++ b/files/ru/glossary/main_axis/index.md @@ -35,6 +35,6 @@ slug: Glossary/Main_Axis ### Дальнейшее чтение -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS Flexbox Guide: _[Aligning items in a flex container](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/ru/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- CSS Flexbox Guide: _[Aligning items in a flex container](/ru/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)_ +- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/ru/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ diff --git a/files/ru/glossary/method/index.md b/files/ru/glossary/method/index.md index 81005b7a27e628..b7f35a5b9aa759 100644 --- a/files/ru/glossary/method/index.md +++ b/files/ru/glossary/method/index.md @@ -14,7 +14,7 @@ slug: Glossary/Method ### Узнайте об этом -- [Определение методов в JavaScript](/ru/docs/Web/JavaScript/Reference/Functions/Определиние_методов) (сравнение традиционного синтаксиса и нового короткого) +- [Определение методов в JavaScript](/ru/docs/Web/JavaScript/Reference/Functions/Method_definitions) (сравнение традиционного синтаксиса и нового короткого) ### Техническая информация @@ -29,4 +29,4 @@ slug: Glossary/Method - {{Glossary("property","Свойство")}} - {{Glossary("static method","Статический метод")}} -- [Определение методов в JavaScript](/ru/docs/Web/JavaScript/Reference/Functions/Определиние_методов) +- [Определение методов в JavaScript](/ru/docs/Web/JavaScript/Reference/Functions/Method_definitions) diff --git a/files/ru/glossary/mime_type/index.md b/files/ru/glossary/mime_type/index.md index f22b430135f9a4..9c4fc48999776f 100644 --- a/files/ru/glossary/mime_type/index.md +++ b/files/ru/glossary/mime_type/index.md @@ -15,6 +15,6 @@ slug: Glossary/MIME_type ### Технические справки -- [List of MIME types](http://www.iana.org/assignments/media-types/media-types.xhtml) -- [Properly Configuring Server MIME Types](/ru/docs/Properly_Configuring_Server_MIME_Types) +- [List of MIME types](https://www.iana.org/assignments/media-types/media-types.xhtml) +- [Properly Configuring Server MIME Types](/ru/docs/Learn/Server-side/Configuring_server_MIME_types) - Детальная информация об использовании [MIME Types](/ru/docs/Web/HTTP/MIME_types) в контексте Веб. diff --git a/files/ru/glossary/number/index.md b/files/ru/glossary/number/index.md index 483c738174e058..3cda4ecd895376 100644 --- a/files/ru/glossary/number/index.md +++ b/files/ru/glossary/number/index.md @@ -16,5 +16,5 @@ slug: Glossary/Number ### Техническая справка -- Числовой тип данных JavaScript: [Number](/ru/docs/Web/JavaScript/Data_structures#.D0.A7.D0.B8.D1.81.D0.BB.D0.B0) +- Числовой тип данных JavaScript: [Number](/ru/docs/Web/JavaScript/Data_structures#.d0.a7.d0.b8.d1.81.d0.bb.d0.b0) - Глобальный объект JavaScript: {{jsxref("Number")}} diff --git a/files/ru/glossary/object/index.md b/files/ru/glossary/object/index.md index 8d8fbe82313bcc..4fc43ddd3fda39 100644 --- a/files/ru/glossary/object/index.md +++ b/files/ru/glossary/object/index.md @@ -14,4 +14,4 @@ slug: Glossary/Object ### Общие сведения - {{jsxref("Object")}} в [справочнике JavaScript](/ru/docs/Web/JavaScript/Reference) -- [Object data structures in JavaScript](/ru/docs/Web/JavaScript/Data_structures#Objects) +- [Object data structures in JavaScript](/ru/docs/Web/JavaScript/Data_structures#objects) diff --git a/files/ru/glossary/oop/index.md b/files/ru/glossary/oop/index.md index 7c83354ca3249a..e1da084cebcc86 100644 --- a/files/ru/glossary/oop/index.md +++ b/files/ru/glossary/oop/index.md @@ -7,7 +7,7 @@ slug: Glossary/OOP **ООП** (**О**бъектно-**О**риентированное **П**рограммирование) это подход в программировании, согласно которому, данные инкапсулированы внутри **{{glossary("object","объектов")}}**, а сам объект существует как составная часть целого. -{{glossary("JavaScript")}} сильно объектно-ориентирован. Он следует модели, базирующейся на прототипах ([в отличии от модели, базирующейся на классах](/ru/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages)). +{{glossary("JavaScript")}} сильно объектно-ориентирован. Он следует модели, базирующейся на прототипах ([в отличии от модели, базирующейся на классах](/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#class-based_vs._prototype-based_languages)). ## Смотрите также diff --git a/files/ru/glossary/plugin/index.md b/files/ru/glossary/plugin/index.md index e30ff1cad4a6b4..6ff7f2ac5c8bff 100644 --- a/files/ru/glossary/plugin/index.md +++ b/files/ru/glossary/plugin/index.md @@ -17,7 +17,7 @@ slug: Glossary/Plugin - : Начиная с Firefox 55 в Августе 2017, пользователи смогут [выбрать](/ru/docs/Plugins/Flash_Activation:_Browser_Comparison), каким сайта разрешено активировать Flash плагин. У пользователей появится надстройка, разрешающая запуск Flash, для каждого сайта отдельно. _Это изменение будет вводится постепенно, начиная с Августа и Сентября 2017._ - В целях повышения безопасности и улучшения производительности, Mozilla будет вести [список сайтов](/ru/docs/Plugins/Blocking_By_Domain), которые не могу использовать никакие плагины. + В целях повышения безопасности и улучшения производительности, Mozilla будет вести [список сайтов](/ru/docs/Glossary/Plugin), которые не могу использовать никакие плагины. - Сентябрь 2017 - : Начиная с Firefox 56 в Сентябре 2017, в Firefox для Android будет удалена поддержка всех плагинов ([Firefox bug 1381916](https://bugzil.la/1381916)). diff --git a/files/ru/glossary/regular_expression/index.md b/files/ru/glossary/regular_expression/index.md index 8191a37dd9a23f..f745555a9dbe29 100644 --- a/files/ru/glossary/regular_expression/index.md +++ b/files/ru/glossary/regular_expression/index.md @@ -18,4 +18,4 @@ slug: Glossary/Regular_expression ### Технические -- [Написание регулярных выражений в JavaScript](/ru/docs/Web/JavaScript/Guide/Regular_Expressions) +- [Написание регулярных выражений в JavaScript](/ru/docs/Web/JavaScript/Guide/Regular_expressions) diff --git a/files/ru/glossary/request_header/index.md b/files/ru/glossary/request_header/index.md index e2ac345bf3c97f..ced432a47e585a 100644 --- a/files/ru/glossary/request_header/index.md +++ b/files/ru/glossary/request_header/index.md @@ -41,4 +41,4 @@ Content-Length: 128 ### Технические знания -- [Список всех HTTP заголовков](/ru/docs/Web/HTTP/Заголовки) +- [Список всех HTTP заголовков](/ru/docs/Web/HTTP/Headers) diff --git a/files/ru/glossary/responsive_web_design/index.md b/files/ru/glossary/responsive_web_design/index.md index ee20bff26f8cd4..2d587cc63d6cc5 100644 --- a/files/ru/glossary/responsive_web_design/index.md +++ b/files/ru/glossary/responsive_web_design/index.md @@ -11,6 +11,6 @@ _Адаптивный веб-дизайн_ ( **RWD** ) - это концепци ### Общая информация -- [Summary and resources](/ru/docs/Web_Development/Responsive_Web_design) -- [Pros and cons of going responsive](/ru/docs/Web_Development/Mobile/Responsive_design) +- [Summary and resources](/ru/docs/Web/Progressive_web_apps) +- [Pros and cons of going responsive](/ru/docs/Web/Progressive_web_apps) - [Responsive Web Design](http://msdn.microsoft.com/en-us/magazine/hh653584.aspx) diff --git a/files/ru/glossary/round_trip_time/index.md b/files/ru/glossary/round_trip_time/index.md index f1bc814820c596..c3c3d2f2852ba4 100644 --- a/files/ru/glossary/round_trip_time/index.md +++ b/files/ru/glossary/round_trip_time/index.md @@ -24,5 +24,5 @@ round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms ## Смотрите также -- [Time to First Byte (TTFB)](/ru/docs/Glossary/time_to_first_byte) +- [Time to First Byte (TTFB)](/ru/docs/Glossary/Time_to_first_byte) - [Latency](/ru/docs/Glossary/Latency) diff --git a/files/ru/glossary/sdp/index.md b/files/ru/glossary/sdp/index.md index 36f54a1f7bd430..3fa0a895850554 100644 --- a/files/ru/glossary/sdp/index.md +++ b/files/ru/glossary/sdp/index.md @@ -29,4 +29,4 @@ SDP is never used alone, but by protocols like {{Glossary("RTP")}} and {{Glossar ### General knowledge -- [WebRTC protocols](/ru/docs/Web/API/WebRTC_API/Architecture/Protocols) +- [WebRTC protocols](/ru/docs/Web/API/WebRTC_API/Protocols) diff --git a/files/ru/glossary/semantics/index.md b/files/ru/glossary/semantics/index.md index faa55b64042de8..d831d3c482a227 100644 --- a/files/ru/glossary/semantics/index.md +++ b/files/ru/glossary/semantics/index.md @@ -67,8 +67,8 @@ HTML должен предоставлять структуру информац ## Learn more -- [HTML element reference](/ru/docs/Web/HTML/Element#Inline_text_semantics) on MDN -- [Using HTML sections and outlines](/ru/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5) on MDN +- [HTML element reference](/ru/docs/Web/HTML/Element#inline_text_semantics) on MDN +- [Using HTML sections and outlines](/ru/docs/Web/HTML/Element/Heading_Elements#problems_solved_by_html5) on MDN - [MDN Web Docs Glossary](/ru/docs/Glossary) - {{Glossary("SEO")}} diff --git a/files/ru/glossary/string/index.md b/files/ru/glossary/string/index.md index ed6ef0497fb57b..4b6a9aceac43c2 100644 --- a/files/ru/glossary/string/index.md +++ b/files/ru/glossary/string/index.md @@ -13,4 +13,4 @@ slug: Glossary/String ### Общие сведения -- [JavaScript data types and data structures](/ru/docs/Web/JavaScript/Data_structures#String_type) +- [JavaScript data types and data structures](/ru/docs/Web/JavaScript/Data_structures#string_type) diff --git a/files/ru/glossary/svg/index.md b/files/ru/glossary/svg/index.md index 98af6cb4475b42..8b5192ae340f2e 100644 --- a/files/ru/glossary/svg/index.md +++ b/files/ru/glossary/svg/index.md @@ -11,7 +11,7 @@ _Масштабируемая векторная графика_ ( **SVG** ) - На основе синтаксиса {{Glossary("XML")}}, SVG можно стилизовать с помощью {{Glossary("CSS")}} и сделать интерактивным с использованием {{Glossary("JavaScript")}}. HTML5 теперь позволяет прямое встраивание {{Glossary("Tag","тегов")}} SVG в {{Glossary("HTML")}} документ. -В качестве [формата векторного изображения](http://en.wikipedia.org/wiki/Vector_graphics) графика SVG может масштабироваться бесконечно, делая их неоценимыми в [адаптивном дизайне](/ru/docs/Glossary/responsive_design) , поскольку вы можете создавать элементы интерфейса и графику, масштабируемые для любого размера экрана. SVG также предоставляет полезный набор инструментов, таких как обрезание, маскирование, фильтры и анимации. +В качестве [формата векторного изображения](http://en.wikipedia.org/wiki/Vector_graphics) графика SVG может масштабироваться бесконечно, делая их неоценимыми в [адаптивном дизайне](/ru/docs/Glossary/Responsive_web_design) , поскольку вы можете создавать элементы интерфейса и графику, масштабируемые для любого размера экрана. SVG также предоставляет полезный набор инструментов, таких как обрезание, маскирование, фильтры и анимации. ## Смотрите также @@ -22,4 +22,4 @@ _Масштабируемая векторная графика_ ( **SVG** ) - ### Техническая документация - [SVG documentation on MDN](/ru/docs/Web/SVG) -- [Latest SVG specification](http://www.w3.org/TR/SVG/) +- [Latest SVG specification](https://www.w3.org/TR/SVG/) diff --git a/files/ru/glossary/tag/index.md b/files/ru/glossary/tag/index.md index fd995475a1afa1..3a030d10518bf4 100644 --- a/files/ru/glossary/tag/index.md +++ b/files/ru/glossary/tag/index.md @@ -11,7 +11,7 @@ slug: Glossary/Tag ### Общие знания -- [HTML Теги на W3](http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html) +- [HTML Теги на W3](https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html) ### Техническое руководство diff --git a/files/ru/glossary/time_to_first_byte/index.md b/files/ru/glossary/time_to_first_byte/index.md index 130612962cd392..e3c9d743457f33 100644 --- a/files/ru/glossary/time_to_first_byte/index.md +++ b/files/ru/glossary/time_to_first_byte/index.md @@ -5,7 +5,7 @@ slug: Glossary/Time_to_first_byte {{GlossarySidebar}} -**Время до первого байта** (англ. Time to First Byte, TTFB) - одна из метрик производительности веб-страниц, которая описывает время, которое прошло с момента отправления браузером запроса страницы до момента, когда он получил первый байт информации с сервера. Это время включает в себя поиск [DNS](/ru/docs/Glossary/DNS)-сервера и установление соединения с использованием [TCP](/ru/docs/Glossary/TCP)-рукопожатия и [SSL](/ru/docs/Glossary/SSL_Glossary)-рукопожатия, если запрос выполняется через [https](/ru/docs/Glossary/https). +**Время до первого байта** (англ. Time to First Byte, TTFB) - одна из метрик производительности веб-страниц, которая описывает время, которое прошло с момента отправления браузером запроса страницы до момента, когда он получил первый байт информации с сервера. Это время включает в себя поиск [DNS](/ru/docs/Glossary/DNS)-сервера и установление соединения с использованием [TCP](/ru/docs/Glossary/TCP)-рукопожатия и [SSL](/ru/docs/Glossary/SSL)-рукопожатия, если запрос выполняется через [https](/ru/docs/Glossary/HTTPS). TTFB - время между началом запроса и началом ответа в миллисекундах: diff --git a/files/ru/glossary/time_to_interactive/index.md b/files/ru/glossary/time_to_interactive/index.md index eaf04ed1f17793..58a9dda4898bca 100644 --- a/files/ru/glossary/time_to_interactive/index.md +++ b/files/ru/glossary/time_to_interactive/index.md @@ -5,7 +5,7 @@ slug: Glossary/Time_to_interactive {{GlossarySidebar}} -**Время до интерактивности** (англ. Time to Interactive, TTI) - это нестандартизированная метрика веб-производительности, которая определяется как момент времени, когда завершилась последняя [долгая задача](/ru/docs/Web/API/Long_Tasks_API), после которой следовало 5 секунд бездействия сети и основного потока. +**Время до интерактивности** (англ. Time to Interactive, TTI) - это нестандартизированная метрика веб-производительности, которая определяется как момент времени, когда завершилась последняя [долгая задача](/ru/docs/Web/API/PerformanceLongTaskTiming), после которой следовало 5 секунд бездействия сети и основного потока. TTI, предложенный WICG в 2018 году, был предназначен для предоставления показателя, описывающей состояние, когда страница или приложение содержит полезный контент, а основной поток простаивает и может свободно реагировать на взаимодействия с пользователем, включая регистрацию обработчиков событий. diff --git a/files/ru/glossary/user_agent/index.md b/files/ru/glossary/user_agent/index.md index 4aa99df06bbf90..241f1a71d04e6d 100644 --- a/files/ru/glossary/user_agent/index.md +++ b/files/ru/glossary/user_agent/index.md @@ -23,4 +23,4 @@ slug: Glossary/User_agent ### Техническая справка -- [User agent](http://tools.ietf.org/html/rfc2616#section-14.43) заголовок запроса в спецификации RFC 2616 +- [User agent](https://tools.ietf.org/html/rfc2616#section-14.43) заголовок запроса в спецификации RFC 2616 diff --git a/files/ru/glossary/w3c/index.md b/files/ru/glossary/w3c/index.md index 27cc7debd39216..95c72590fe52c9 100644 --- a/files/ru/glossary/w3c/index.md +++ b/files/ru/glossary/w3c/index.md @@ -15,4 +15,4 @@ W3C объединяет более 350 организаций-участник ### Основная информация -- [W3C веб-сайт](http://www.w3.org/) +- [W3C веб-сайт](https://www.w3.org/) diff --git a/files/ru/glossary/wai/index.md b/files/ru/glossary/wai/index.md index 32cf72c6f9ce07..0d86c30d75cbfd 100644 --- a/files/ru/glossary/wai/index.md +++ b/files/ru/glossary/wai/index.md @@ -11,4 +11,4 @@ _WAI_ или _Web Accessibility Initiative_ (англ. Инициатива до ### Базовые знания -- [Сайт WAI](http://www.w3.org/WAI/) +- [Сайт WAI](https://www.w3.org/WAI/) diff --git a/files/ru/glossary/websockets/index.md b/files/ru/glossary/websockets/index.md index 6d58ce01c7c9fa..30305fe8b14712 100644 --- a/files/ru/glossary/websockets/index.md +++ b/files/ru/glossary/websockets/index.md @@ -17,5 +17,5 @@ _WebSocket_ - это {{Glossary("protocol", "протокол")}}, которы ### Примеры использования -- [Создание клиентского приложения WebSocket](/ru/docs/WebSockets/Writing_WebSocket_client_applications) +- [Создание клиентского приложения WebSocket](/ru/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) - [Создание сервера с использованием WebSocket](/ru/docs/Web/API/WebSockets_API/Writing_WebSocket_servers) diff --git a/files/ru/glossary/whitespace/index.md b/files/ru/glossary/whitespace/index.md index f3533d54fc88c7..99b03597bc5e0a 100644 --- a/files/ru/glossary/whitespace/index.md +++ b/files/ru/glossary/whitespace/index.md @@ -17,7 +17,7 @@ slug: Glossary/Whitespace 2. Ссылки - 1. [Пробельные символы в модели DOM](/ru/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM) + 1. [Пробельные символы в модели DOM](/ru/docs/Web/API/Document_Object_Model/Whitespace) 2. {{cssxref("white-space")}} 3. [Глоссарий](/ru/docs/Glossary) diff --git a/files/ru/glossary/world_wide_web/index.md b/files/ru/glossary/world_wide_web/index.md index 49eec5e9d5c0a4..0a4f2e27576f5b 100644 --- a/files/ru/glossary/world_wide_web/index.md +++ b/files/ru/glossary/world_wide_web/index.md @@ -23,9 +23,9 @@ slug: Glossary/World_Wide_Web ### Обучение -- [Изучение веб-разработки](/en-US/Learn) +- [Изучение веб-разработки](/ru/docs/Learn) - [Web literacy map](https://learning.mozilla.org/web-literacy) (знания и умения, необходимые для веб-разработки) ### Общие ведомости -- [Сайт международного сообщества W3C](http://w3.org) +- [Сайт международного сообщества W3C](https://w3.org) diff --git a/files/ru/glossary/xhtml/index.md b/files/ru/glossary/xhtml/index.md index 88856b05b1b88c..9336a256c17c01 100644 --- a/files/ru/glossary/xhtml/index.md +++ b/files/ru/glossary/xhtml/index.md @@ -5,24 +5,24 @@ slug: Glossary/XHTML {{GlossarySidebar}} -**XHTML** по отношению к [XML](/ru/XML) - это так же, как [HTML](/ru/HTML) по отношению к [SGML](/en/SGML). Таким образом, XHTML - язык разметки который подобен HTML, но с более строгим синтаксисом. Две версии XHTML были закончены (окончательно сформулированы) [W3C](http://www.w3.org/): +**XHTML** по отношению к [XML](/ru/XML) - это так же, как [HTML](/ru/docs/Web/HTML) по отношению к [SGML](/en-US/SGML). Таким образом, XHTML - язык разметки который подобен HTML, но с более строгим синтаксисом. Две версии XHTML были закончены (окончательно сформулированы) [W3C](https://www.w3.org/): -- [XHTML 1.0](http://www.w3.org/TR/xhtml1/) - это HTML4 повторно сформулированный как XML-приложение , и с обратной совместимостью с HTML в ограниченных случаях. -- [XHTML 1.1](http://www.w3.org/TR/xhtml11/) - это модульная версия XHTML, которая не является обратно совместимой с HTML. +- [XHTML 1.0](https://www.w3.org/TR/xhtml1/) - это HTML4 повторно сформулированный как XML-приложение , и с обратной совместимостью с HTML в ограниченных случаях. +- [XHTML 1.1](https://www.w3.org/TR/xhtml11/) - это модульная версия XHTML, которая не является обратно совместимой с HTML. -Третья версия, [XHTML 2](http://www.w3.org/TR/xhtml2/) - содержит существенные изменения словаря элементов (has significant changes to the element vocabulary). +Третья версия, [XHTML 2](https://www.w3.org/TR/xhtml2/) - содержит существенные изменения словаря элементов (has significant changes to the element vocabulary). Для получения дополнительной информации о XHTML, см.: - [Wikipedia's XHTML article](http://ru.wikipedia.org/wiki/XHTML) -- [Sending XHTML as text/html considered harmful](http://www.hixie.ch/advocacy/xhtml) +- [Sending XHTML as text/html considered harmful](https://www.hixie.ch/advocacy/xhtml) ### Инструменты - [Markup validation service (W3C)](http://validator.w3.org/) -- [Standards-Compliant Authoring Tools](/en/Standards-Compliant_Authoring_Tools) +- [Standards-Compliant Authoring Tools](/en-US/Standards-Compliant_Authoring_Tools) ### Смотрите также -- [HTML](/ru/HTML) +- [HTML](/ru/docs/Web/HTML) - [Namespaces](/ru/Namespaces) diff --git a/files/ru/learn/accessibility/css_and_javascript/index.md b/files/ru/learn/accessibility/css_and_javascript/index.md index 3b96d2e5c22456..16a6eb2fad16c7 100644 --- a/files/ru/learn/accessibility/css_and_javascript/index.md +++ b/files/ru/learn/accessibility/css_and_javascript/index.md @@ -86,7 +86,7 @@ em { } ``` -Однако не стоит сильно менять стандартную стилизацию акцентирующих элементов. Стандартный вид полужирного и курсивного текста хорошо узнаваем, поэтому изменение стилизации может вызывать путаницу. Для более подробной информации смотрите [Акцент и важность](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Акцент_и_важность). +Однако не стоит сильно менять стандартную стилизацию акцентирующих элементов. Стандартный вид полужирного и курсивного текста хорошо узнаваем, поэтому изменение стилизации может вызывать путаницу. Для более подробной информации смотрите [Акцент и важность](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#акцент_и_важность). #### Аббревиатуры @@ -107,7 +107,7 @@ abbr { } ``` -Стандартная стилизация для аббревиатур — это пунктирное подчёркивание, не стоит от этого сильно отклоняться. Для более подробной информации смотрите [Аббревиатуры](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Аббревиатуры). +Стандартная стилизация для аббревиатур — это пунктирное подчёркивание, не стоит от этого сильно отклоняться. Для более подробной информации смотрите [Аббревиатуры](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#аббревиатуры). #### Ссылки @@ -174,7 +174,7 @@ a:active { При выборе цветовой палитры для сайта, следует следить за тем, чтобы цвет текста имел высокий уровень контрастности относительно цвета фона. Дизайн может выглядеть очень стильно, однако это не будет иметь никакого смысла, если люди с дефектами зрения (такими как дальтонизм) не смогут прочитать ваш контент. -К счастью, проверить, всё ли в порядке с уровнем контрастности, весьма просто. Существует множество онлайн-инструментов, которые помогут сравнить пару цветов и вычислить значение контрастности. Например, [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) от WebAIM. Это довольно простой в использовании инструмент, который также предоставляет инструкции, как можно добиться соответствия критериям WCAG по контрастности цветов. +К счастью, проверить, всё ли в порядке с уровнем контрастности, весьма просто. Существует множество онлайн-инструментов, которые помогут сравнить пару цветов и вычислить значение контрастности. Например, [Color Contrast Checker](https://webaim.org/resources/contrastchecker/) от WebAIM. Это довольно простой в использовании инструмент, который также предоставляет инструкции, как можно добиться соответствия критериям WCAG по контрастности цветов. > [!NOTE] > Высокий уровень контрастности также позволяет пользователям мобильных устройств с глянцевыми экранами комфортнее читать текст при ярком освещении. @@ -192,7 +192,7 @@ a:active { А вот {{cssxref("visibility")}}`:hidden` и {{cssxref("display")}}`:none`, напротив, использовать для скрытия контента не следует, потому что они скрывают его не только визуально, но и от скринридеров. Поэтому применять эти свойства стоит, только если совсем скрыть контент и является вашей задачей. > [!NOTE] -> В статье [Невидимый контент только для пользователей скринридеров (EN)](http://webaim.org/techniques/css/invisiblecontent/) содержится множество полезной информации по этой теме. +> В статье [Невидимый контент только для пользователей скринридеров (EN)](https://webaim.org/techniques/css/invisiblecontent/) содержится множество полезной информации по этой теме. ### Помните, что пользователи могут переопределять стили @@ -214,9 +214,9 @@ a:active { Сравнительно несложно сделать доступным простой контент — например, текст, изображения, таблицы, формы и кнопки. Вспомним основные тезисы из статьи [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML): - Хорошая семантика: использование каждого элемента для своей задачи. Следует убедиться, что используются различные типы элементов: заголовки, параграфы, {{htmlelement("button")}}, {{htmlelement("a")}} и так далее. -- Контент должен быть доступен либо как обычный текст, либо как [альтернативный текст](/ru/docs/Learn/Accessibility/HTML#Альтернативный_текст), например атрибут alt для изображений. +- Контент должен быть доступен либо как обычный текст, либо как [альтернативный текст](/ru/docs/Learn/Accessibility/HTML#альтернативный_текст), например атрибут alt для изображений. -Мы также показали пример использования JavaScript для добавления некоторым элементам возможностей, которых они лишены по умолчанию — смотрите в разделе [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры). Такое решение стоит рассматривать только в случае, когда по какой-то причине у вас нет доступа к изменению разметки. Намного надежнее и универсальнее будет использовать для каждой задачи соответствующий элемент. Также улучшить доступность несемантичных JavaScript-виджетов можно использованием WAI-ARIA атрибутов — с их помощью можно добавить некоторой искусственной семантики для пользователей скринридеров. В следующей статье мы рассмотрим эту тему подробнее. +Мы также показали пример использования JavaScript для добавления некоторым элементам возможностей, которых они лишены по умолчанию — смотрите в разделе [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#добавление_доступности_с_клавиатуры). Такое решение стоит рассматривать только в случае, когда по какой-то причине у вас нет доступа к изменению разметки. Намного надежнее и универсальнее будет использовать для каждой задачи соответствующий элемент. Также улучшить доступность несемантичных JavaScript-виджетов можно использованием WAI-ARIA атрибутов — с их помощью можно добавить некоторой искусственной семантики для пользователей скринридеров. В следующей статье мы рассмотрим эту тему подробнее. Сложные приложения, например 3D-игры, сделать доступными непросто — написанная с использованием [WebGL](/ru/docs/Web/API/WebGL_API) игра рендерится в элементе {{htmlelement("canvas")}}, который в настоящее время не предоставляет никаких возможностей для использования людьми с дефектами зрения. Можно успокаивать себя тем, что данная группа пользователей не входит в целевую аудиторию, поэтому не стоит ожидать полной доступности для них. Тем не менее, вы можете реализовать [управление с помощью клавиатуры](/ru/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) для игроков, которые не могут использовать мышь, а также сделать цветовую схему достаточно контрастной для игроков с дальтонизмом. @@ -321,7 +321,7 @@ function createLink(testItem) { > Кто-то из читателей мог задуматься о том факте, что в HTML5 формах есть встроенные механизмы валидации, такие как атрибуты `required`, `min`/`minlength` и `max`/`maxlength` (смотрите подробнее на странице элемента {{htmlelement("input")}}). Мы не использовали их в примере, потому что поддержка браузерами у HTML5 валидации весьма варьируется (например, только IE10 и новее). > [!NOTE] -> Статья [Удобная и доступная валидация форм (EN)](http://webaim.org/techniques/formvalidation/) от WebAIM содержит дополнительную полезную информацию по этой теме. +> Статья [Удобная и доступная валидация форм (EN)](https://webaim.org/techniques/formvalidation/) от WebAIM содержит дополнительную полезную информацию по этой теме. ### Прочие проблемы доступности, связанные с JavaScript @@ -347,7 +347,7 @@ imgThumb.onblur = hideImg; Первые две строки кода запускают функцию, когда указатель мыши наводится на изображение или уходит с него, соответственно. Такая реализация не позволит открыть увеличенное изображение при помощи клавиатуры. Чтобы решить эту проблему, мы добавили последние две строки, которые запускают функции в случаях, если фокус перешёл на изображение или же ушёл с него. Таким образом, увеличенное изображение будет открываться при переходе на миниатюру при помощи клавиши tab (это возможно, потому что мы добавили миниатюрам `tabindex="0"`). -Событие [click](/ru/docs/Web/API/Element/click_event) довольно любопытное — выглядит так, будто бы оно специфичное для мыши, однако большинство браузеров при нажатии клавиши Enter/Return активируют обработчики событий [onclick](/ru/docs/Web/API/GlobalEventHandlers/onclick) на находящихся в фокусе ссылках или элементах формы, а также при тапе по элементам на сенсорном экране. Впрочем, это не работает автоматически, если вы позволяете принимать фокус неинтерактивному по умолчанию элементу при помощи tabindex — в таких случаях нужно специально прослушивать нажатие нужных кнопок (смотрите [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры)). +Событие [click](/ru/docs/Web/API/Element/click_event) довольно любопытное — выглядит так, будто бы оно специфичное для мыши, однако большинство браузеров при нажатии клавиши Enter/Return активируют обработчики событий [onclick](/ru/docs/Web/API/Element/click_event) на находящихся в фокусе ссылках или элементах формы, а также при тапе по элементам на сенсорном экране. Впрочем, это не работает автоматически, если вы позволяете принимать фокус неинтерактивному по умолчанию элементу при помощи tabindex — в таких случаях нужно специально прослушивать нажатие нужных кнопок (смотрите [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#добавление_доступности_с_клавиатуры)). ## Проверьте ваши навыки! diff --git a/files/ru/learn/accessibility/what_is_accessibility/index.md b/files/ru/learn/accessibility/what_is_accessibility/index.md index 0fd63b20b43670..61e85a4265c3c5 100644 --- a/files/ru/learn/accessibility/what_is_accessibility/index.md +++ b/files/ru/learn/accessibility/what_is_accessibility/index.md @@ -39,7 +39,7 @@ slug: Learn/Accessibility/What_is_accessibility - Некоторые платные коммерческие продукты, такие как [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS) (Windows) и [Window Eyes](http://www.gwmicro.com/window-eyes/) (Windows). - Некоторые бесплатные продукты, такие как [NVDA](http://www.nvaccess.org/) (для Windows), [ChromeVox](http://www.chromevox.com/) (браузер Chrome, Windows и Mac ОС Х) и [Orca](https://wiki.gnome.org/Projects/Orca) (Linux). -- Некоторые из них встроены в операционную систему, например [VoiceOver](http://www.apple.com/accessibility/osx/voiceover/) (Mac OS X и iOS), [Экранный диктор](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)([Narrator](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)) (Microsoft Windows), [ChromeVox](http://www.chromevox.com/) (в ChromeOS) и [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback) (Android). +- Некоторые из них встроены в операционную систему, например [VoiceOver](https://www.apple.com/accessibility/osx/voiceover/) (Mac OS X и iOS), [Экранный диктор](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)([Narrator](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)) (Microsoft Windows), [ChromeVox](http://www.chromevox.com/) (в ChromeOS) и [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback) (Android). Хорошая идея ознакомиться с экранными дикторами; вы можете настроить экранный считыватель и поиграть с ним, чтобы получить представление о том, как это работает. Более подробную информацию об их использовании см. в [руководстве по кросс-браузерному тестированию](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders). Видео ниже предоставляет краткий пример взаимодействия с экранными читателями. @@ -86,7 +86,7 @@ slug: Learn/Accessibility/What_is_accessibility С точки зрения статистики, опять же цифры значительны. Отчёт Корнелльского университета [О состоянии инвалидности за 2014 год](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf) (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности. -> **Примечание:** [Страница о когнитивных расстройствах](http://webaim.org/articles/cognitive/) на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать. +> **Примечание:** [Страница о когнитивных расстройствах](https://webaim.org/articles/cognitive/) на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать. ## Реализация доступности в проекте diff --git a/files/ru/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md b/files/ru/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md index b8aade8564d9f9..913829b178293f 100644 --- a/files/ru/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md +++ b/files/ru/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_us Эта статья содержит основные советы, которые помогут вам создавать веб-сайты для любого типа пользователей. -| Перед началом: | Сначала вам следует прочитать [What is accessibility?](/en-US/Learn/What_is_accessibility), поскольку мы не рассматриваем здесь **доступность** подробно. | -| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Универсальный дизайн означает дизайн для всех, независимо от инвалидности или технических ограничений. В этой статье перечислены наиболее важные характеристики для универсального дизайна. | +| Перед началом: | Сначала вам следует прочитать [What is accessibility?](/ru/docs/Learn/Common_questions/Design_and_accessibility/What_is_accessibility), поскольку мы не рассматриваем здесь **доступность** подробно. | +| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Универсальный дизайн означает дизайн для всех, независимо от инвалидности или технических ограничений. В этой статье перечислены наиболее важные характеристики для универсального дизайна. | ## Краткое описание @@ -26,7 +26,7 @@ slug: Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_us Давайте загрузим и установим [анализатор цветового контраста](http://www.paciellogroup.com/resources/contrastanalyser/) Paciello Group. > [!NOTE] -> В качестве альтернативы вы можете найти ряд инструментов проверки контраста в интернете, таких как [проверка цветового контраста](http://webaim.org/resources/contrastchecker/) WebAIM. Мы предлагаем локальную проверку, потому что она поставляется в комплекте с экранным цветоподборщиком, чтобы узнать значение цвета. +> В качестве альтернативы вы можете найти ряд инструментов проверки контраста в интернете, таких как [проверка цветового контраста](https://webaim.org/resources/contrastchecker/) WebAIM. Мы предлагаем локальную проверку, потому что она поставляется в комплекте с экранным цветоподборщиком, чтобы узнать значение цвета. Например, давайте протестируем цвета на этой странице и посмотрим, как мы справляемся с анализатором цветового контраста: @@ -184,7 +184,7 @@ div.container { max-width:70em; } Если изображение может быть описано кратко, вы можете предоставить атрибут `alt` и ничего больше. Если изображение не может быть описано кратко, вам придётся либо предоставить тот же контент в другой форме на той же странице (например, дополнить круговую диаграмму таблицей, содержащей те же данные), либо прибегнуть к атрибуту `longdesc`. Значение этого атрибута представляет собой URL-адрес, указывающий на ресурс, явно описывающий в деталях содержимое изображения. > [!NOTE] -> Использование и даже существование `longdesc` обсуждается уже довольно давно. Пожалуйста, обратитесь к [расширению описания изображений](http://www.w3.org/TR/html-longdesc/) W3C (longdesc) для получения полного объяснения и подробных примеров. +> Использование и даже существование `longdesc` обсуждается уже довольно давно. Пожалуйста, обратитесь к [расширению описания изображений](https://www.w3.org/TR/html-longdesc/) W3C (longdesc) для получения полного объяснения и подробных примеров. #### Аудио/видео diff --git a/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md index d492ca5dd53bad..254b8937213818 100644 --- a/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md +++ b/files/ru/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md @@ -25,7 +25,7 @@ slug: Learn/Common_questions/Design_and_accessibility/Thinking_before_coding ## Активное Обучение -_На данный момент этот раздел ещё не готов. Вы можете помочь сообществу разработчиков, вступив в [Please, consider contributing](/ru/docs/MDN/Getting_started)._ +_На данный момент этот раздел ещё не готов. Вы можете помочь сообществу разработчиков, вступив в [Please, consider contributing](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Более глубокое погружение diff --git a/files/ru/learn/common_questions/index.md b/files/ru/learn/common_questions/index.md index 05494279fe2dbe..85c22a0e2b3685 100644 --- a/files/ru/learn/common_questions/index.md +++ b/files/ru/learn/common_questions/index.md @@ -11,27 +11,27 @@ slug: Learn/Common_questions Данный раздел покрывает "механику" Всемирной паутины — вопросы, относящиеся к общим знаниям о экосистеме Всемирной паутины и тому, как эта экосистема работает. -- [Как работает Интернет?](/ru/docs/Learn/Common_questions/How_does_the_Internet_work) +- [Как работает Интернет?](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) - : **Интернет** - основа Всемирной паутины; техническая инфраструктура, благодаря которой возможно существование Всемирной паутины. Выражаясь проще, Интернет - это большая сеть компьютеров, которые "общаются" друг с другом. В данной статье обсуждается, как он (Интернет) работает на базовом уровне. -- [В чём разница между веб-страницей, веб-сайтом, веб-сервером и поисковым движком?](/ru/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines) +- [В чём разница между веб-страницей, веб-сайтом, веб-сервером и поисковым движком?](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) - : В этой статье мы рассмотрим различные связанные с вебом концепции: веб-страницы, веб-сайты, веб-сервера и поисковые движки. Новички в вебе часто путают или неправильно используют данные термины. Давайте узнаем, что они означают! -- [Что такое URL?](/ru/docs/Learn/Common_questions/What_is_a_URL) +- [Что такое URL?](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) - : Наряду с понятиями [гипертекста](/ru/docs/Glossary/Hypertext) и [протокола HTTP](/ru/docs/Glossary/HTTP), понятие [URL](/ru/docs/Glossary/URL) является одной из основных концепций Всемирной паутины. Это механизм, используемый [браузерами](/ru/docs/Glossary/Browser) для получения любого опубликованного во Всемирной сети ресурса. -- [Что такое доменное имя?](/ru/docs/Learn/Common_questions/What_is_a_domain_name) +- [Что такое доменное имя?](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) - : Доменные имена являются ключевой частью инфраструктуры сети Интернет. С их помощью обеспечивается удобочитаемый адрес для любого веб-сервера, доступного в сети Интернет. -- [Что такое веб-сервер?](/ru/docs/Learn/Common_questions/What_is_a_web_server) +- [Что такое веб-сервер?](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) - : Термин «[веб-сервер](/ru/docs/Glossary/Server)» может относиться к оборудованию или программному обеспечению (ПО), которое предоставляет клиентам доступ к веб-сайтам через сеть Интернет, или к ним обоим (оборудованию и ПО), работающим вместе. В этой статье мы рассмотрим, как работают веб-серверы и то, почему они важны. -- [Что такое гиперссылки?](/ru/docs/Learn/Common_questions/What_are_hyperlinks) +- [Что такое гиперссылки?](/ru/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks) - : В этой статье мы рассмотрим, что такое [гиперссылки](/ru/docs/Glossary/Hyperlink) и почему они важны. @@ -39,43 +39,43 @@ slug: Learn/Common_questions Вопросы, связанные с инструментами / программным обеспечением, которое вы можете использовать для создания веб-сайтов. -- [Сколько стоит сделать что-то в Интернете?](/ru/docs/Learn/Common_questions/How_much_does_it_cost) +- [Сколько стоит сделать что-то в Интернете?](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost) - : Когда вы запускаете веб-сайт, вы можете ничего не потратить, или ваши расходы могут быть достаточно высокими. В этой статье мы обсудим, сколько всё стоит и что вы получаете за то, за что вы платите (или не платите). -- [Какое ПО мне необходимо для создания веб-сайта?](/ru/docs/Learn/Common_questions/What_software_do_I_need) +- [Какое ПО мне необходимо для создания веб-сайта?](/ru/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need) - : В этой статье мы объясним, какие программные компоненты необходимы вам при редактировании, выгрузке или просмотре веб-сайта. -- [Какие текстовые редакторы доступны?](/ru/docs/Learn/Common_questions/Available_text_editors) +- [Какие текстовые редакторы доступны?](/ru/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors) - : В этой статье мы выделили некоторые моменты, которые следует учитывать при выборе и установке текстового редактора для веб-разработки. -- [Что такое "Инструменты разработчика" браузера?](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) +- [Что такое "Инструменты разработчика" браузера?](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) - : Каждый браузер имеет набор инструментов разработчика для отладки HTML, CSS и другого веб-кода. В этой статье объясняется, как использовать основные функции из инструментов разработчика вашего браузера. -- [Как убедиться в том, что веб-сайт работает правильно?](/ru/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly) +- [Как убедиться в том, что веб-сайт работает правильно?](/ru/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly) - : Итак, вы опубликовали свой сайт в Интернете - очень хорошо! Но уверены ли вы в том, что он работает правильно? В этой статье приведены некоторые основные шаги по устранению неполадок. -- [Как настроить локальный сервер тестирования?](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server) +- [Как настроить локальный сервер тестирования?](/ru/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) - : В этой статье объясняется, как настроить простой локальный сервер тестирования на вашем компьютере, и основы его использования. -- [Как загрузить файлы на веб-сервер?](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server) +- [Как загрузить файлы на веб-сервер?](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server) - : В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространённых способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров. -- [Как использовать GitHub Pages?](/ru/docs/Learn/Common_questions/Using_GitHub_Pages) +- [Как использовать GitHub Pages?](/ru/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages) - : В этой статье представлено базовое руководство по публикации контента с использованием функции **gh-pages** сайта GitHub. -- [Как разместить сайт в Интернете при помощи платформы Google App Engine?](/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) +- [Как разместить сайт в Интернете при помощи платформы Google App Engine?](/ru/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine) - : Ищете место для размещения вашего сайта? Здесь представлено пошаговое руководство по размещению вашего сайта с помощью платформы Google App Engine. -- [Какие существуют инструменты для отладки сайта и увеличения его производительности?](/ru/docs/Tools/Performance) +- [Какие существуют инструменты для отладки сайта и увеличения его производительности?](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html) - : В этом группе статей рассказывается, как использовать инструменты разработчика в браузере Firefox для отладки и повышения производительности вашего веб-сайта, а именно инструменты для проверки использования памяти, просмотра дерева вызовов [JavaScript](/ru/docs/Glossary/JavaScript), количества отображаемых узлов [DOM](/ru/docs/Glossary/DOM) и т. д. @@ -83,23 +83,23 @@ slug: Learn/Common_questions В этом разделе перечислены вопросы, связанные с эстетикой, структурой страницы, техниками для достижения удобства пользованием сайта и т. д. -- [С чего мне следует начать создание дизайна веб-сайта?](/ru/docs/Learn/Common_questions/Thinking_before_coding) +- [С чего мне следует начать создание дизайна веб-сайта?](/ru/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding) - : В этой статье рассматривается крайне важный первый шаг каждого проекта: определение того, чего вы хотите достичь с его помощью. -- [Какова структура наиболее используемых макетов сайтов?](/ru/docs/Learn/Common_questions/Common_web_layouts) +- [Какова структура наиболее используемых макетов сайтов?](/ru/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts) - : При разработке страниц вашего сайта хорошо иметь представление о наиболее распространённых макетах. В этой статье приведены некоторые типичные макеты веб-сайтов, а также части, которые входят в каждый макет. -- [Что такое удобство использования?](/ru/docs/Learn/Common_questions/What_is_accessibility) +- [Что такое удобство использования?](/ru/docs/Learn/Common_questions/Design_and_accessibility/What_is_accessibility) - : В этой статье представлены основные концепции достижения удобства пользования веб-страницами. -- [Как разрабатывать сайты для всех категорий пользователей?](/ru/docs/Learn/Common_questions/Design_for_all_types_of_users) +- [Как разрабатывать сайты для всех категорий пользователей?](/ru/docs/Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_users) - : В этой статье приводятся основные методы, которые помогут вам создавать веб-сайты для любого пользователя. -- [Какие средства HTML используются для обеспечения удобства использования?](/ru/docs/Learn/Common_questions/HTML_features_for_accessibility) +- [Какие средства HTML используются для обеспечения удобства использования?](/ru/docs/Learn/Common_questions/Design_and_accessibility/HTML_features_for_accessibility) - : В этой статье описываются специфические особенности HTML, которые могут использоваться для того, чтобы сделать веб-страницу более доступной для людей с различными нарушениями. diff --git a/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md index 447227258a1b3f..2b7b6c8d506511 100644 --- a/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md +++ b/files/ru/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost Веб-разработка обходится не так дёшево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему. -| Прежде чем приступить: | Вам следует уже иметь представление о том, [какое программное обеспечение вам нужно](/en-US/Learn/What_software_do_I_need), различия между веб-страницей, веб-сайтом, и тд, а также о том, [что из себя представляет доменное имя](/en-US/Learn/Understanding_domain_names). | -| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Рассмотреть весь процесс создания веб-сайта и оценить расходы на каждом шаге. | +| Прежде чем приступить: | Вам следует уже иметь представление о том, [какое программное обеспечение вам нужно](/ru/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need), различия между веб-страницей, веб-сайтом, и тд, а также о том, [что из себя представляет доменное имя](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name). | +| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Рассмотреть весь процесс создания веб-сайта и оценить расходы на каждом шаге. | ## Резюме @@ -39,7 +39,7 @@ slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost Если вы хотите встроить видео или аудио в ваш веб-сайт, то вы можете встроить онлайн сервисы (например, YouTube, Vimeo, или Dailymotion), или встроить ваши собственные видео (см. ниже расходы на пропускную способность). -Для аудиофайлов, вы можете найти бесплатное программное обеспечение ([Audacity](http://audacity.sourceforge.net/?lang=en), [Wavosaur](http://www.wavosaur.com/)), либо заплатить пару сотен долларов ([Sony Sound Forge](http://www.sonycreativesoftware.com/soundforge), [Adobe Audition](http://www.adobe.com/products/audition.html)). Подобным образом, видеоредакторы могут быть бесплатными ([PiTiVi](http://www.pitivi.org/), [OpenShot](http://www.openshot.org/) для Linux, [iMovie](https://www.apple.com/mac/imovie/) для Mac), менее чем $100 ([Adobe Premiere Elements](https://www.adobe.com/us/products/premiere-elements.html)), либо иметь стоимость в пару сотен долларов ([Adobe Premiere Pro](https://www.adobe.com/products/premiere.html), [Avid Media Composer](http://www.avid.com/US/products/family/Media-Composer), [Final Cut Pro](https://www.apple.com/final-cut-pro/)). Программное обеспечение, поставляемое с вашей цифровой камерой может, также, удовлетворить все ваши нужды. +Для аудиофайлов, вы можете найти бесплатное программное обеспечение ([Audacity](http://audacity.sourceforge.net/?lang=en), [Wavosaur](http://www.wavosaur.com/)), либо заплатить пару сотен долларов ([Sony Sound Forge](http://www.sonycreativesoftware.com/soundforge), [Adobe Audition](https://www.adobe.com/products/audition.html)). Подобным образом, видеоредакторы могут быть бесплатными ([PiTiVi](http://www.pitivi.org/), [OpenShot](http://www.openshot.org/) для Linux, [iMovie](https://www.apple.com/mac/imovie/) для Mac), менее чем $100 ([Adobe Premiere Elements](https://www.adobe.com/us/products/premiere-elements.html)), либо иметь стоимость в пару сотен долларов ([Adobe Premiere Pro](https://www.adobe.com/products/premiere.html), [Avid Media Composer](http://www.avid.com/US/products/family/Media-Composer), [Final Cut Pro](https://www.apple.com/final-cut-pro/)). Программное обеспечение, поставляемое с вашей цифровой камерой может, также, удовлетворить все ваши нужды. ### Инструменты публикации @@ -127,7 +127,7 @@ slug: Learn/Common_questions/Tools_and_setup/How_much_does_it_cost ## Следующие шаги -На данный момент у вас есть понимание того, во сколько вам может обойтись ваш сайт, так что настало время проектирования веб-сайта и [настройки вашего рабочего пространства.](/ru/docs/Learn/Set_up_a_basic_working_environment) +На данный момент у вас есть понимание того, во сколько вам может обойтись ваш сайт, так что настало время проектирования веб-сайта и [настройки вашего рабочего пространства.](/ru/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) -- Прочитайте о том, [как выбрать и установить текстовый редактор](/ru/docs/Learn/Choose,_Install_and_set_up_a_text_editor). -- Если вы больше сфокусированы на проектировании, взгляните на [анатомию веб-страницы](/en-US/Learn/Anatomy_of_a_web_page). +- Прочитайте о том, [как выбрать и установить текстовый редактор](/ru/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors). +- Если вы больше сфокусированы на проектировании, взгляните на [анатомию веб-страницы](/ru/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts). diff --git a/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md index c0275ba2d4c3e2..965eb2395de062 100644 --- a/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md +++ b/files/ru/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server Эта статья объясняет как установить простой локальный тестовый сервер на вашем компьютере, а так же основы его использования. -| Требования: | Сначала вам необходимо изучить [как работает интернет](/ru/docs/Learn/How_the_Internet_works), а также [что такое веб-сервер](/ru/docs/Learn/What_is_a_Web_server). | -| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы научитесь как устанавливать локальный тестовый сервер. | +| Требования: | Сначала вам необходимо изучить [как работает интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work), а также [что такое веб-сервер](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server). | +| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы научитесь как устанавливать локальный тестовый сервер. | ## Локальные и удалённые файлы @@ -72,6 +72,6 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server Модуль Python `SimpleHTTPServer (python 2.0) http.server (python 3.0)` полезен, но он не знает, как запускать код, написанный на таких языках, как Python, PHP или JavaScript. Чтобы справиться с этим, вам понадобится нечто большее - именно то, что вам нужно, зависит от языка сервера, который вы пытаетесь запустить. Вот несколько примеров: -- Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав [Django Web Framework (Python)](/ru/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с [install Python/PIP](/ru/docs/Learn/Server-side/Django/development_environment#Installing_Python_3), а затем установите Flask с помощью `pip3 install flask`. На этом этапе вы сможете запустить примеры Python Flask, используя, например, `python3 python-example.py`, затем перейдя на `localhost: 5000` в свой браузер. +- Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав [Django Web Framework (Python)](/ru/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с [install Python/PIP](/ru/docs/Learn/Server-side/Django/development_environment#installing_python_3), а затем установите Flask с помощью `pip3 install flask`. На этом этапе вы сможете запустить примеры Python Flask, используя, например, `python3 python-example.py`, затем перейдя на `localhost: 5000` в свой браузер. - Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express - хороший выбор - см. [Express Web Framework (Node.js/JavaScript)](/ru/docs/Learn/Server-side/Express_Nodejs). - Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются [MAMP](https://www.mamp.info/en/downloads/) (Mac и Windows), [AMPPS](http://ampps.com/download) (Mac, Windows, Linux) и [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL. diff --git a/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md index 75474128bfd1da..f3274301a314bf 100644 --- a/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md +++ b/files/ru/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools). -| Необходимые знания: | Вы должны знать [что такое веб-сервер](/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80) и [как работают доменные имена](/ru/docs/Learn/Understanding_domain_names). Также вы должны знать, [как установить базовую среду](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server) и [как написать простую веб-страницу](/ru/docs/Learn/Getting_started_with_the_web). | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Научиться передавать файлы на сервер используя различные доступные инструменты передачи файлов(file transfer tools). | +| Необходимые знания: | Вы должны знать [что такое веб-сервер](/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80) и [как работают доменные имена](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name). Также вы должны знать, [как установить базовую среду](/ru/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) и [как написать простую веб-страницу](/ru/docs/Learn/Getting_started_with_the_web). | +| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Научиться передавать файлы на сервер используя различные доступные инструменты передачи файлов(file transfer tools). | ## Сводка @@ -20,7 +20,7 @@ slug: Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server Существуют различные варианты SFTP клиентов. В нашем примере мы будем использовать [FileZilla](https://filezilla-project.org/), тк он бесплатен и подходит для Windows, macOS и Linux. Чтобы установить менеджер перейдите на страницу загрузки [FileZilla downloads page](https://filezilla-project.org/download.php?type=client), нажмите на кнопку загрузки, затем установите пакет из установочного файла обычным способом. > [!NOTE] -> Конечно, есть много других вариантов. Смотрите [Publishing tools](/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client) для других способов. +> Конечно, есть много других вариантов. Смотрите [Publishing tools](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#publishing_tools.3a_ftp_client) для других способов. Откройте приложение FileZilla; вы должны увидеть что-то вроде этого: @@ -133,7 +133,7 @@ Again, you would have to get the connection credentials from your hosting provid GitHub allows you to publish websites via [GitHub pages](https://pages.github.com/) (gh-pages). -We've covered the basics of using this in the [Publishing your website](/en-US/Learn/Getting_started_with_the_web/Publishing_your_website) article from our [Getting started with the Web](/en-US/Learn/Getting_started_with_the_web) guide, so we aren't going to repeat it all here. +We've covered the basics of using this in the [Publishing your website](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website) article from our [Getting started with the Web](/ru/docs/Learn/Getting_started_with_the_web) guide, so we aren't going to repeat it all here. However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See [Using a custom domain with GitHub Pages](https://help.github.com/articles/using-a-custom-domain-with-github-pages/) for a detailed guide. diff --git a/files/ru/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/ru/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index e04399ee6c578f..4ed1ca0bd0af3f 100644 --- a/files/ru/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/ru/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -8,7 +8,7 @@ slug: Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит вас использовать базовые функции инструментов разработчика в вашем браузере. > [!NOTE] -> Прежде чем начать заниматься с примерами, откройте [пример сайта для начинающих](http://mdn.github.io/beginner-html-site-scripted/), с которым мы работали на [предыдущих занятиях](/en-US/Learn/Getting_started_with_the_web). Вам следует держать его открытым, чтобы выполнить описанные ниже действия. +> Прежде чем начать заниматься с примерами, откройте [пример сайта для начинающих](https://mdn.github.io/beginner-html-site-scripted/), с которым мы работали на [предыдущих занятиях](/ru/docs/Learn/Getting_started_with_the_web). Вам следует держать его открытым, чтобы выполнить описанные ниже действия. ## Как открыть инструменты веб-разработчика в вашем браузере? @@ -84,7 +84,7 @@ slug: Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools Узнать больше об Inspector в различных браузерах: -- [Firefox Page inspector](/ru/docs/Tools/Page_Inspector) +- [Firefox Page inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html) - [IE DOM Explorer](http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx) - [Chrome DOM inspector](https://developer.chrome.com/docs/devtools/) (Inspector в Opera схож с Inspector в Chrome) - [Safari DOM inspector and style explorer](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1) @@ -139,7 +139,7 @@ slug: Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools Узнать больше о JavaScript консоли в различных браузерах: -- [Firefox Web Console](/ru/docs/Tools/Web_Console) +- [Firefox Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html) - [IE JavaScript console](http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx) - [Chrome JavaScript Console](https://developer.chrome.com/docs/devtools/) (Inpector в Opera схож с Inspector в Chrome) - [Safari Console](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1) diff --git a/files/ru/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/ru/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md index 52708a6f16d6e1..458e2f6020d7db 100644 --- a/files/ru/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md +++ b/files/ru/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work Эта статья о том, что такое Интернет, и как он работает. -| Необходимые знания: | Отсутствуют, но мы будем признательны, если вы сначала прочтёте [Материал о там как начать разрабатывать свой сайт](/ru/docs/Learn/Thinking_before_coding) | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы изучите основы технической инфраструктуры Веба и поймёте разницу между Вебом и интернетом. | +| Необходимые знания: | Отсутствуют, но мы будем признательны, если вы сначала прочтёте [Материал о там как начать разрабатывать свой сайт](/ru/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding) | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы изучите основы технической инфраструктуры Веба и поймёте разницу между Вебом и интернетом. | ## Резюме @@ -85,6 +85,6 @@ slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work ## Дальнейшие шаги -- [Как работает Веб](/ru/Learn/Getting_started_with_the_web/How_the_Web_works) -- [Понимание разницы между веб-страницей, веб-сайтом, веб-сервером и поисковиком](/ru/docs/Learn/Pages_sites_servers_and_search_engines) -- [Что такое доменные имена](/ru/docs/Learn/Understanding_domain_names) +- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works) +- [Понимание разницы между веб-страницей, веб-сайтом, веб-сервером и поисковиком](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) +- [Что такое доменные имена](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md index 9517eeea71a454..1e9e13b374b8eb 100644 --- a/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md +++ b/files/ru/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engine В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают! -| Необходимые знания: | Вы должны знать, [как работает Интернет](/en-US/Learn/How_the_Internet_works). | -| ------------------- | ----------------------------------------------------------------------------------------- | -| Цель: | Изучить различия между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами. | +| Необходимые знания: | Вы должны знать, [как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work). | +| ------------------- | ------------------------------------------------------------------------------------------------------------------- | +| Цель: | Изучить различия между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами. | ## В двух словах @@ -28,7 +28,7 @@ slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engine ## Активное изучение -_Пока что активное изучение не доступно. Если вы можете предоставить полезную информацию, то, [пожалуйста, окажите нам содействие](/ru/docs/MDN/Getting_started)._ +_Пока что активное изучение не доступно. Если вы можете предоставить полезную информацию, то, [пожалуйста, окажите нам содействие](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Погружаемся глубже @@ -76,5 +76,5 @@ _Поисковые системы_ являются распространён ## Смотрите также -- Погружаемся глубже: [что такое Веб-сервер](/ru/docs/Learn/What_is_a_web_server) -- Рассмотрим, как веб-страницы связаны с веб-сайтом: [Разбираемся с веб-ссылками](/ru/docs/Learn/Understanding_links_on_the_web) +- Погружаемся глубже: [что такое Веб-сервер](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) +- Рассмотрим, как веб-страницы связаны с веб-сайтом: [Разбираемся с веб-ссылками](/ru/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks) diff --git a/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md b/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md index 583399d21d0c0f..a67909d461b222 100644 --- a/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md +++ b/files/ru/learn/common_questions/web_mechanics/what_are_hyperlinks/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks В данной статье мы узнаем, что такое ссылки и почему они важны. -| Предварительно: | Вы должны знать [как работает интернет](/en-US/Learn/How_the_Internet_works) и иметь представление о [разнице между веб-страницей, веб-сайтом, веб-сервером и поисковой системой.](/ru/docs/Learn/page_vs_site_vs_server_vs_search_engine) | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Цель: | Изучить, что такое веб-ссылки и почему они важны. | +| Предварительно: | Вы должны знать [как работает интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) и иметь представление о [разнице между веб-страницей, веб-сайтом, веб-сервером и поисковой системой.](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Изучить, что такое веб-ссылки и почему они важны. | ## Коротко @@ -33,7 +33,7 @@ slug: Learn/Common_questions/Web_mechanics/What_are_hyperlinks ## Активно изучаем -_В данном разделе нет контента. [Please, consider contributing](/ru/docs/MDN/Getting_started)._ +_В данном разделе нет контента. [Please, consider contributing](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Глубокое погружение @@ -74,6 +74,6 @@ _В данном разделе нет контента. [Please, consider contr Так что теперь, конечно, вы захотите создать несколько веб-страниц со ссылками! -- Чтобы получить более теоретическое обоснование, узнайте об [URL-адресах и их структуре](/ru/docs/Learn/Understanding_URLs), поскольку каждая ссылка указывает на URL-адрес. +- Чтобы получить более теоретическое обоснование, узнайте об [URL-адресах и их структуре](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL), поскольку каждая ссылка указывает на URL-адрес. - Хотите что-нибудь более практичное? В статье [Создание гиперссылок](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) нашего модуля [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) подробно объясняется, как реализовывать ссылки. -- Приступите к изучению HTML. Научитесь [создавать HTML-документы и связывать их между собой.](/ru/docs/Learn/HTML/Write_a_simple_page_in_HTML) +- Приступите к изучению HTML. Научитесь [создавать HTML-документы и связывать их между собой.](/ru/docs/Learn/Getting_started_with_the_web) diff --git a/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md index 020d6251ad373a..7e2d450ef5a11e 100644 --- a/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md +++ b/files/ru/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_domain_name В этом материале мы обсудим доменные имена: что это такое, как они формируются и как зарегистрировать домен для себя. -| Необходимые знания: | Вы должны знать [как работает Интернет](/ru/docs/Learn/How_the_Internet_works) и понимать устройство [устройство URL](/en-US/Learn/Understanding_URLs). | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы узнаете, что такое доменные имена, как они работают и почему они важны. | +| Необходимые знания: | Вы должны знать [как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) и понимать устройство [устройство URL](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL). | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы узнаете, что такое доменные имена, как они работают и почему они важны. | ## Summary @@ -19,7 +19,7 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_domain_name ## Активно изучаем -_В данный момент нет обучающего курса . Но вы можете [помочь составить его](/ru/docs/MDN/Getting_started)._ +_В данный момент нет обучающего курса . Но вы можете [помочь составить его](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Глубокое погружение @@ -123,6 +123,6 @@ NOT FOUND Итак, мы поговорили о процессах и архитектуре. Время двигаться дальше. -- Если вы хотите попробовать сделать что-то руками, то самое время разобраться в дизайне и изучить [анатомию веб-страницы](/en-US/Learn/Anatomy_of_a_web_page). -- Также не стоит забывать, что некоторые аспекты создания сайта стоят денег. Здесь мы рассказываем, [сколько стоит создание веб-сайта](/ru/docs/Learn/How_much_does_it_cost). +- Если вы хотите попробовать сделать что-то руками, то самое время разобраться в дизайне и изучить [анатомию веб-страницы](/ru/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts). +- Также не стоит забывать, что некоторые аспекты создания сайта стоят денег. Здесь мы рассказываем, [сколько стоит создание веб-сайта](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost). - И ещё вы можете прочитать о [доменных именах](http://en.wikipedia.org/wiki/Domain_name) в Wikipedia. diff --git a/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md b/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md index 8299ffbad04023..1eae2ca6d7bd3e 100644 --- a/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md +++ b/files/ru/learn/common_questions/web_mechanics/what_is_a_url/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_URL Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и описывает его структуру. -| Предварительно: | Вам нужно узнать [как работает интернет](/ru/docs/Learn/How_the_Internet_works), [что такое Веб сервер](/ru/docs/Learn/What_is_a_Web_server) and [что лежит в основе веб ссылок](/ru/docs/Learn/Understanding_links_on_the_web). | -| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы узнаете, что такое URL и как они работают в вебе. | +| Предварительно: | Вам нужно узнать [как работает интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work), [что такое Веб сервер](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server) and [что лежит в основе веб ссылок](/ru/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks). | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы узнаете, что такое URL и как они работают в вебе. | ## Введение @@ -19,7 +19,7 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_URL ## Активное обучение -_Активного обучения пока не существует. [Пожалуйста подумайте, возможно вы сможете внести свой вклад](/ru/docs/MDN/Getting_started)._ +_Активного обучения пока не существует. [Пожалуйста подумайте, возможно вы сможете внести свой вклад](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Подробная информация @@ -63,7 +63,7 @@ http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereI Каждый URL может быть напечатан напрямую в адресной строке браузера, чтобы сразу получить запрошенный ресурс. Но это только вершина айсберга! -Язык {{Glossary("HTML")}} — [который будет обсуждать позже](/ru/docs/Learn/HTML/HTML_tags) — позволяет активно использовать URL для: +Язык {{Glossary("HTML")}} — [который будет обсуждать позже](/ru/docs/Learn/HTML/Introduction_to_HTML) — позволяет активно использовать URL для: - создания ссылок на другие документы с помощью тега {{HTMLElement("a")}}; - связывания документа с его дополнительными файлами, например с помощью тегов {{HTMLElement("link")}} или {{HTMLElement("script")}}; @@ -151,4 +151,4 @@ http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereI ## Следующие шаги -- [Понимание доменных имён](/ru/docs/Learn/Understanding_domain_names) +- [Понимание доменных имён](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) diff --git a/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md index e426a774374a73..5315d8fde245f2 100644 --- a/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md +++ b/files/ru/learn/common_questions/web_mechanics/what_is_a_web_server/index.md @@ -7,9 +7,9 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server В этой статье мы узнаем, что из себя представляют веб-серверы, как они работают, и почему они так важны. -| Необходимые знания: | Вы должны уже знать, [как работает Интернет](/ru/docs/Learn/Common_questions/How_does_the_Internet_work) и [понимать разницу между страницей, сайтом, сервером и поисковой системой.](/ru/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines) | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Вы узнаете, что такое веб-сервер и получите общее представление о том, как он работает. | +| Необходимые знания: | Вы должны уже знать, [как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) и [понимать разницу между страницей, сайтом, сервером и поисковой системой.](/ru/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines) | +| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Вы узнаете, что такое веб-сервер и получите общее представление о том, как он работает. | ## Введение @@ -32,7 +32,7 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server ## Активное изучение -_Активное изучение пока не доступно. [Пожалуйста, рассмотрите возможность внести свой вклад](/ru/docs/MDN/Contribute/Getting_started)._ +_Активное изучение пока не доступно. [Пожалуйста, рассмотрите возможность внести свой вклад](/ru/docs/MDN/Community/Contributing/Getting_started)._ ## Погружаемся глубже @@ -49,9 +49,9 @@ _Активное изучение пока не доступно. [Пожалу - имеет неизменный IP адрес (не все {{Glossary("ISP", "провайдеры")}} предоставляют статический IP-адрес для домашнего подключения) - обслуживается третьей, сторонней компанией -По всем этим причинам поиск хорошего хостинг-провайдера является ключевой частью создания вашего сайта. Рассмотрите многочисленные предложения компаний и выберите то, что соответствует вашим потребностям и бюджету (предложения варьируются от бесплатных до тысяч долларов в месяц). Вы можете найти подробности в [этой статье.](/ru/docs/Learn/Common_questions/How_much_does_it_cost#hosting) +По всем этим причинам поиск хорошего хостинг-провайдера является ключевой частью создания вашего сайта. Рассмотрите многочисленные предложения компаний и выберите то, что соответствует вашим потребностям и бюджету (предложения варьируются от бесплатных до тысяч долларов в месяц). Вы можете найти подробности в [этой статье.](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#hosting) -Как только вы решили проблему с хостингом, вам понадобится только [загрузить свои файлы на ваш веб-сервер](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server). +Как только вы решили проблему с хостингом, вам понадобится только [загрузить свои файлы на ваш веб-сервер](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server). ### Связь по HTTP @@ -90,6 +90,6 @@ HTTP задаёт строгие правила взаимодействия к Теперь, когда вы познакомились с веб-серверами, вы можете: -- прочитать [насколько сложно делать что-либо в веб](/ru/docs/Learn/Common_questions/How_much_does_it_cost) -- узнать больше о [разнообразии ПО, которое может пригодиться для создания веб-сайта](/ru/docs/Learn/Common_questions/What_software_do_I_need) -- двигаться к практике: например, [узнать как загружать файлы на веб-сервер](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server). +- прочитать [насколько сложно делать что-либо в веб](/ru/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost) +- узнать больше о [разнообразии ПО, которое может пригодиться для создания веб-сайта](/ru/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need) +- двигаться к практике: например, [узнать как загружать файлы на веб-сервер](/ru/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server). diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md index e7c9310c58ba50..8d941eedd4fb1b 100644 --- a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md @@ -15,7 +15,7 @@ slug: Learn/CSS/Building_blocks/Advanced_styling_effects {{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и `text-shadow`, `box-shadows` отлично поддерживаются браузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней. -Вы можете найти примеры из стати на [box-shadow.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) (или в [исходном коде](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html)). +Вы можете найти примеры из стати на [box-shadow.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) (или в [исходном коде](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html)). ### Обычная тень @@ -187,7 +187,7 @@ button:active { - {{cssxref("background-blend-mode")}}, которое смешивает цвет фона и цвета отдельного элемента. - {{cssxref("mix-blend-mode")}}, которое смешивает элементы, наложенные друг на друга. -Вы можете найти больше примеров смешивания на странице [blend-modes.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) (смотрите [источник](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)) и на странице {{cssxref("<blend-mode>")}}. +Вы можете найти больше примеров смешивания на странице [blend-modes.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) (смотрите [источник](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)) и на странице {{cssxref("<blend-mode>")}}. > [!NOTE] > Смешивание — относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства. @@ -300,9 +300,9 @@ article div:last-child { Форма в этом примере не реагирует на содержание изображения. Вместо этого в центре изображения определяется центр окружности, как если бы мы начертили циркулем окружность, вписанную в изображение. Это та окружность, которую обтекает текст. > [!NOTE] -> В Firefox вы можете использовать [Инспектор фигур](/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes), чтобы редактировать фигуры. +> В Firefox вы можете использовать [Инспектор фигур](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html), чтобы редактировать фигуры. -Значение `circle()` — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте [Обзор CSS-фигур](/ru/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) на MDN.) +Значение `circle()` — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте [Обзор CSS-фигур](/ru/docs/Web/CSS/CSS_shapes/Overview_of_shapes) на MDN.) ## -webkit-background-clip: text @@ -320,7 +320,7 @@ article div:last-child { Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами. > [!NOTE] -> Пример с `-webkit-background-clip: text` смотрите на [background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (или [источнике](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)). +> Пример с `-webkit-background-clip: text` смотрите на [background-clip-text.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (или [источнике](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)). ## Итог diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md index 6df04aac8c3d54..3f39279876ff0c 100644 --- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -66,7 +66,7 @@ CSS-свойство {{cssxref ("background")}} является сокраще #### Изменение размеров фонового изображения -В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения [длины](/ru/docs/Web/CSS/размер) или в [процентах](/ru/docs/Web/CSS/percentage), чтобы размер изображения соответствовал размеру фона. +В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения [длины](/ru/docs/Web/CSS/length) или в [процентах](/ru/docs/Web/CSS/percentage), чтобы размер изображения соответствовал размеру фона. Вы также можете использовать ключевые слова: @@ -104,7 +104,7 @@ CSS-свойство {{cssxref ("background")}} является сокраще } ``` -Допустимы значения [длины](/ru/docs/Web/CSS/размер) и [процентные](/ru/docs/Web/CSS/percentage): +Допустимы значения [длины](/ru/docs/Web/CSS/length) и [процентные](/ru/docs/Web/CSS/percentage): ```css .box { @@ -184,7 +184,7 @@ background-position: - `fixed`: Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране. - `local`: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение `scroll` довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение `local` фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним. -Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на [background-attachment.html](http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (также смотри [исходный код](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds) здесь). +Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на [background-attachment.html](https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (также смотри [исходный код](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds) здесь). ### Использование сокращённого свойства background diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md index a542c1026fbd7a..2204261abca002 100644 --- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -9,9 +9,9 @@ slug: Learn/CSS/Building_blocks/Cascade_and_inheritance Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше. -| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Изучить понятие о каскаде и специфичности, и как работает наследование CSS. | +| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Изучить понятие о каскаде и специфичности, и как работает наследование CSS. | ## Конфликтующие правила @@ -154,7 +154,7 @@ CSS предоставляет четыре специальных универ > [!NOTE] > Универсальный селектор (\*), комбинаторы (+, >, \~, '') и псевдокласс отрицания (:not) не влияют на специфичность. -Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в [справочнике селекторов](/ru/docs/Web/CSS/CSS_Селекторы) MDN. +Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в [справочнике селекторов](/ru/docs/Web/CSS/CSS_selectors) MDN. | Селектор | Тысячи | Сотни | Десятки | Единицы | Специфичность | | -------------------------------------------------------------------------------------------------------- | ------ | ----- | ------- | ------- | ------------- | diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.md b/files/ru/learn/css/building_blocks/debugging_css/index.md index bc3df441614915..877e07d4be34b0 100644 --- a/files/ru/learn/css/building_blocks/debugging_css/index.md +++ b/files/ru/learn/css/building_blocks/debugging_css/index.md @@ -7,25 +7,25 @@ slug: Learn/CSS/Building_blocks/Debugging_CSS Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит. -| Необходимые знания: | Basic computer literacy, [basic software installed](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | -| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задачи: | Изучить основы того, что такое DevTools и как выполнять простую инспекцию и редактирование CSS. | +| Необходимые знания: | Basic computer literacy, [basic software installed](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Задачи: | Изучить основы того, что такое DevTools и как выполнять простую инспекцию и редактирование CSS. | ## Как получить доступ к DevTools браузера -Статья [What are browser developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров. +Статья [What are browser developer tools](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров. -Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править [Grid Layouts](/ru/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts), [Flexbox](/ru/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts), и [Shapes](/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes). Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе. +Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править [Grid Layouts](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html), [Flexbox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html), и [Shapes](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html). Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе. В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать [файл примера](https://mdn.github.io/css-examples/learn/inspecting/inspecting.html). Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше. ## DOM vs View Source -То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когда [просматриваете источник](/ru/docs/Tools/View_source) веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на [HTML панели](/ru/docs/Tools/Page_Inspector/UI_Tour#HTML_pane) DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия. +То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когда [просматриваете источник](https://firefox-source-docs.mozilla.org/devtools-user/view_source/index.html) веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на [HTML панели](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/ui_tour/index.html#html_pane) DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия. В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали `

`, но закрыли `

`, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать `

` с `

`. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript. -View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. [HTML дерево](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree) в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит. +View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. [HTML дерево](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_html/index.html#html_tree) в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит. ## Инспекция применённого CSS @@ -33,7 +33,7 @@ View Source же для сравнения — это просто исходн ![The example page for this tutorial with DevTools open.](inspecting1.png) -Если вы посмотрите на [Rules view](/ru/docs/Tools/Page_Inspector/UI_Tour#Rules_view) справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу `box1` и также CSS который наследуется блоком от предков, в этом случае от ``. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента. +Если вы посмотрите на [Rules view](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/ui_tour/index.html#rules_view) справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу `box1` и также CSS который наследуется блоком от предков, в этом случае от ``. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента. Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись `margin`. @@ -60,13 +60,13 @@ View Source же для сравнения — это просто исходн ![The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open](inspecting3-font-size.png) > [!NOTE] -> Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в [Examine and edit CSS](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS). +> Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в [Examine and edit CSS](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html). ## Понимание модели блоков В предыдущем уроке мы обсудили [модель блоков](/ru/docs/Learn/CSS/Building_blocks/The_box_model) и тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента. -[Layout view](/ru/docs/Tools/Page_Inspector/UI_Tour#Layout_view) показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений. +[Layout view](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/ui_tour/index.html#layout_view) показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений. В этой панели одним из детальных свойств является свойство `box-sizing`, которое контролирует какую блочную модель использует элемент. @@ -77,7 +77,7 @@ View Source же для сравнения — это просто исходн ![The Layout section of the DevTools](inspecting4-box-model.png) > [!NOTE] -> Узнать больше на [Examining and Inspecting the Box Model](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model). +> Узнать больше на [Examining and Inspecting the Box Model](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_the_box_model/index.html). ## Решение проблем специфичности @@ -108,7 +108,7 @@ em { ## Узнайте больше о Firefox DevTools -На MDN имеется много информации о Firefox DevTools. Взгляните на основной [раздел DevTools](/ru/docs/Tools), а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите [The How To Guides](/ru/docs/Tools/Page_Inspector#How_to). +На MDN имеется много информации о Firefox DevTools. Взгляните на основной [раздел DevTools](https://firefox-source-docs.mozilla.org/devtools-user/index.html), а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите [The How To Guides](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html#how_to). ## Отладка проблем в CSS diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md index 6d79848316cc64..5e5a77d2469f2f 100644 --- a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md @@ -9,9 +9,9 @@ slug: Learn/CSS/Building_blocks/Handling_different_text_directions Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними. -| Prerequisites: | Basic computer literacy, [basic software installed](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Понять важность режимов письма для современного CSS. | +| Prerequisites: | Basic computer literacy, [basic software installed](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Цель: | Понять важность режимов письма для современного CSS. | ## Какие бывают режимы письма? @@ -31,7 +31,7 @@ slug: Learn/CSS/Building_blocks/Handling_different_text_directions ## Writing modes and block and inline layout -We have already discussed [block and inline layout](/ru/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes), and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English. +We have already discussed [block and inline layout](/ru/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes), and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English. If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses `writing-mode: horizontal-tb`, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses `writing-mode: vertical-rl`; this is a writing mode that is written vertically and from right to left. @@ -85,7 +85,7 @@ You can see a comparison between physical and logical properties below. {{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}} -There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/ru/docs/Web/CSS/CSS_Logical_Properties). +There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/ru/docs/Web/CSS/CSS_logical_properties_and_values). ### Logical values diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.md b/files/ru/learn/css/building_blocks/images_media_form_elements/index.md index d71d95c71b30d6..043b552d95b24e 100644 --- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.md +++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Images_media_form_elements В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать. -| Prerequisites: | Basic computer literacy, [basic software installed](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Objective: | To understand the way that some elements behave unusually when styled with CSS. | +| Prerequisites: | Basic computer literacy, [basic software installed](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Objective: | To understand the way that some elements behave unusually when styled with CSS. | ## Замещаемые элементы diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.md b/files/ru/learn/css/building_blocks/overflowing_content/index.md index 1292ea96a34f20..0837fd543648e7 100644 --- a/files/ru/learn/css/building_blocks/overflowing_content/index.md +++ b/files/ru/learn/css/building_blocks/overflowing_content/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Overflowing_content В этом уроке мы рассмотрим другую важную концепцию в CSS — **переполнение**. Переполнение это то, что случается когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять. -| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS (study [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Понять, что такое переполнение и как с ним работать. | +| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS (study [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Понять, что такое переполнение и как с ним работать. | ## Что такое переполнение? diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.md b/files/ru/learn/css/building_blocks/selectors/combinators/index.md index d8ccf5b40a86e7..0028b262015dae 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.md +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Selectors/Combinators Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе. -| Необходимые условия: | Базовая компьютерная грамотность, [установленное базовое программное обеспечение](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и понимание работы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS. | +| Необходимые условия: | Базовая компьютерная грамотность, [установленное базовое программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и понимание работы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS. | ## Комбинатор потомка diff --git a/files/ru/learn/css/building_blocks/selectors/index.md b/files/ru/learn/css/building_blocks/selectors/index.md index 311d01d8bad5fe..e9d29746ec94d2 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.md +++ b/files/ru/learn/css/building_blocks/selectors/index.md @@ -158,16 +158,16 @@ article > p { В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами. -| Селектор | Пример | Руководство | -| -------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Селектор по типу](/ru/docs/Web/CSS/Type_selectors) | `h1 { }` | [Селектор по типу](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_%d1%82%d0%b8%d0%bf%d1%83) | -| [Универсальный селектор](/ru/docs/Web/CSS/Universal_selectors) | `* { }` | [Универсальный селектор](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a3%d0%bd%d0%b8%d0%b2%d0%b5%d1%80%d1%81%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80) | -| [Селектор класса](/ru/docs/Web/CSS/Class_selectors) | `.box { }` | [Селекторы классов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%be%d0%b2) | -| [Селектор ID](/ru/docs/Web/CSS/ID_selectors) | `#unique { }` | [Селекторы по ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_id) | -| [Селектор атрибутов](/ru/docs/Web/CSS/Attribute_selectors) | `a[title] { }` | [Селекторы атрибутов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) | -| [Селектор псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [Псевдоклассы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d0%ba%d0%bb%d0%b0%d1%81%d1%81) | -| [Селектор псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [Псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82) | -| [Селектор потомков](/ru/docs/Web/CSS/Descendant_combinator) | `article p` | [Селектор потомков](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80_%d0%bf%d0%be%d1%82%d0%be%d0%bc%d0%ba%d0%be%d0%b2) | -| [Селектор дочерних элементов](/ru/docs/Web/CSS/Child_combinator) | `article > p` | [Селектор дочерних элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%9a%d0%be%d0%bc%d0%b1%d0%b8%d0%bd%d0%b0%d1%82%d0%be%d1%80) | -| [Смежные селекторы](/ru/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p` | [Смежные селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%bc%d0%b5%d0%b6%d0%bd%d1%8b%d0%b5_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b) | -| [Селектор братских элементов](/ru/docs/Web/CSS/General_sibling_combinator) | `h1 ~ p` | [Селектор братских элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%91%d1%80%d0%b0%d1%82%d1%81%d0%ba%d0%b8%d0%b5_%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b) | +| Селектор | Пример | Руководство | +| ----------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Селектор по типу](/ru/docs/Web/CSS/Type_selectors) | `h1 { }` | [Селектор по типу](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_%d1%82%d0%b8%d0%bf%d1%83) | +| [Универсальный селектор](/ru/docs/Web/CSS/Universal_selectors) | `* { }` | [Универсальный селектор](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a3%d0%bd%d0%b8%d0%b2%d0%b5%d1%80%d1%81%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80) | +| [Селектор класса](/ru/docs/Web/CSS/Class_selectors) | `.box { }` | [Селекторы классов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%be%d0%b2) | +| [Селектор ID](/ru/docs/Web/CSS/ID_selectors) | `#unique { }` | [Селекторы по ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_id) | +| [Селектор атрибутов](/ru/docs/Web/CSS/Attribute_selectors) | `a[title] { }` | [Селекторы атрибутов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) | +| [Селектор псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [Псевдоклассы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d0%ba%d0%bb%d0%b0%d1%81%d1%81) | +| [Селектор псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [Псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82) | +| [Селектор потомков](/ru/docs/Web/CSS/Descendant_combinator) | `article p` | [Селектор потомков](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80_%d0%bf%d0%be%d1%82%d0%be%d0%bc%d0%ba%d0%be%d0%b2) | +| [Селектор дочерних элементов](/ru/docs/Web/CSS/Child_combinator) | `article > p` | [Селектор дочерних элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%9a%d0%be%d0%bc%d0%b1%d0%b8%d0%bd%d0%b0%d1%82%d0%be%d1%80) | +| [Смежные селекторы](/ru/docs/Web/CSS/Next-sibling_combinator) | `h1 + p` | [Смежные селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%bc%d0%b5%d0%b6%d0%bd%d1%8b%d0%b5_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b) | +| [Селектор братских элементов](/ru/docs/Web/CSS/Subsequent-sibling_combinator) | `h1 ~ p` | [Селектор братских элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%91%d1%80%d0%b0%d1%82%d1%81%d0%ba%d0%b8%d0%b5_%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b) | diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index 14cdc7441ed4a0..cd2bc6acc28097 100644 --- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -113,7 +113,7 @@ article p:first-child::first-line { | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{ Cssxref(":active") }} | Подходит, когда пользователь активирует (например, щёлкает мышью) элемент. | | {{ Cssxref(":any-link") }} | Соответствует как состоянию `:link,` так и состоянию`:visited` ссылки. | -| {{ Cssxref(":blank") }} | Соответствует [элементу ``](/ru/docs/Web/HTML/Element/Input), для которого значение ввода является пустым. | +| {{ Cssxref(":blank") }} | Соответствует [элементу ``](/ru/docs/Web/HTML/Element/input), для которого значение ввода является пустым. | | {{ Cssxref(":checked") }} | Соответствует переключателю или флажку в выбранном состоянии. | | {{ Cssxref(":current") }} | Соответствует элементу или предку элемента, который в данный момент отображается. | | {{ Cssxref(":default") }} | Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (_обрабатывают нажатие клавиши enter_) в наборе сходных элементов. | @@ -121,7 +121,7 @@ article p:first-child::first-line { | {{ Cssxref(":disabled") }} | Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии. | | {{ Cssxref(":empty") }} | Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела. | | {{ Cssxref(":enabled") }} | Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии. | -| {{ Cssxref(":first") }} | В [постраничном носителе](/ru/docs/Web/CSS/Paged_Media) соответствует первой странице. | +| {{ Cssxref(":first") }} | В [постраничном носителе](/ru/docs/Web/CSS/CSS_paged_media) соответствует первой странице. | | {{ Cssxref(":first-child") }} | Соответствует элементу, который является первым среди других дочерних элементов одного предка. | | {{ Cssxref(":first-of-type") }} | Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка. | | {{ Cssxref(":focus") }} | Соответствует элементу, имеющему фокус. | @@ -135,7 +135,7 @@ article p:first-child::first-line { | {{ Cssxref(":lang") }} | Соответствует элементу, основанному на языке (значение атрибута HTML [lang](/ru/docs/Web/HTML/Global_attributes/lang)). | | {{ Cssxref(":last-child") }} | Соответствует элементу, который является последним среди других дочерних элементов одного предка. | | {{ Cssxref(":last-of-type") }} | Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка. | -| {{ Cssxref(":left") }} | В [постраничном носителе](/ru/docs/Web/CSS/Paged_Media) соответствует левосторонним страницам. | +| {{ Cssxref(":left") }} | В [постраничном носителе](/ru/docs/Web/CSS/CSS_paged_media) соответствует левосторонним страницам. | | {{ Cssxref(":link")}} | Соответствует непосещавшимся ссылкам. | | {{ Cssxref(":local-link")}} | Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ. | | {{ Cssxref(":is", ":is()")}} | Соответствует любому селектору из полученного списка селекторов. | @@ -155,7 +155,7 @@ article p:first-child::first-line { | {{ Cssxref(":read-only") }} | Соответствует элементу, который не может быть изменён пользователем. | | {{ Cssxref(":read-write") }} | Соответствует элементу, который может быть изменён пользователем. | | {{ Cssxref(":required") }} | Соответствует обязательным элементам формы. | -| {{ Cssxref(":right") }} | В [постраничном носителе](/ru/docs/Web/CSS/Paged_Media) соответствует правосторонним страницам. | +| {{ Cssxref(":right") }} | В [постраничном носителе](/ru/docs/Web/CSS/CSS_paged_media) соответствует правосторонним страницам. | | {{ Cssxref(":root") }} | Соответствует элементу, который является корнем документа. | | {{ Cssxref(":scope") }} | Соответствует любому элементу, который является элементом области видимости. | | {{ Cssxref(":valid") }} | Соответствует элементу, такому как \, в допустимом состоянии. | diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md index aec5a4de5ef866..a7dca7402952a8 100644 --- a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md +++ b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем. -| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Изучить различные способы задания размеров объектов в CSS. | +| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Изучить различные способы задания размеров объектов в CSS. | ## Размер по умолчанию или внутренний размер @@ -35,7 +35,7 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS ### Использование процентного соотношения -Во многих отношениях проценты действуют как единицы длины, и, как мы [обсуждали в уроке, посвященном значениям и единицам](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages), они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, _от чего этот процент рассчитывается_. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера. +Во многих отношениях проценты действуют как единицы длины, и, как мы [обсуждали в уроке, посвященном значениям и единицам](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#percentages), они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, _от чего этот процент рассчитывается_. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера. {{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}} diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.md b/files/ru/learn/css/building_blocks/styling_tables/index.md index 1e9c9e8c05dd7b..2aec8cbe3e5393 100644 --- a/files/ru/learn/css/building_blocks/styling_tables/index.md +++ b/files/ru/learn/css/building_blocks/styling_tables/index.md @@ -213,7 +213,7 @@ 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")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают [несколько фоновых изображений](/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) и [линейные градиенты](). +Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают [несколько фоновых изображений](/ru/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds) и [линейные градиенты](). #### Полосатая зебра diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.md b/files/ru/learn/css/building_blocks/the_box_model/index.md index 43f79c6fa05f6b..969c48184fb72e 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.md +++ b/files/ru/learn/css/building_blocks/the_box_model/index.md @@ -155,7 +155,7 @@ html { ### Использование инструментов разработчика в браузере для просмотра блочных моделей -[Инструменты разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете! +[Инструменты разработчика](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете! ![Проверка блочной модели элемента с использованием инструментов разработчика Firefox](box-model-devtools.png) @@ -190,7 +190,7 @@ html { {{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} -Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. [margin collapsing](/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит. +Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. [margin collapsing](/ru/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing). Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит. ### Рамка diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.md b/files/ru/learn/css/building_blocks/values_and_units/index.md index c6f4e9216aed80..6138285d5ea28c 100644 --- a/files/ru/learn/css/building_blocks/values_and_units/index.md +++ b/files/ru/learn/css/building_blocks/values_and_units/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Building_blocks/Values_and_units Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее общие значения и единицы в использовании. -| Prerequisites: | Basic computer literacy, [basic software installed](/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Objective: | To learn about the different types of values and units used in CSS properties. | +| Prerequisites: | Basic computer literacy, [basic software installed](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Objective: | To learn about the different types of values and units used in CSS properties. | ## Что такое значение CSS? @@ -230,7 +230,7 @@ In the following example we have positioned a background image 40px from the top Throughout the examples above, we've seen places where keywords are used as a value (for example `` keywords like `red`, `black`, `rebeccapurple`, and `goldenrod`). These keywords are more accurately described as _identifiers_, a special value that CSS understands. As such they are not quoted — they are not treated as strings. -There are places where you use strings in CSS, for example [when specifying generated content](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after). In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string. +There are places where you use strings in CSS, for example [when specifying generated content](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after). In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string. {{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} diff --git a/files/ru/learn/css/css_layout/floats/index.md b/files/ru/learn/css/css_layout/floats/index.md index 10e4bd1c8791db..5f4289ea1d7d91 100644 --- a/files/ru/learn/css/css_layout/floats/index.md +++ b/files/ru/learn/css/css_layout/floats/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Floats Первоначально используемое для "обтекания" картинок текстом, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье. -| Предварительные требования: | Базовое знакомство с HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), а также идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов. | +| Предварительные требования: | Базовое знакомство с HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), а также идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Задача: | Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов. | ## Общие сведения о float @@ -233,7 +233,7 @@ body { {{ EmbedLiveSample('Float_2', '100%', 500) }} -[Линейные блоки](/ru/docs/Web/CSS/Visual_formatting_model#Line_boxes) нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину. +[Линейные блоки](/ru/docs/Web/CSS/Visual_formatting_model#line_boxes) нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину. ## Очистка обтекания @@ -585,7 +585,7 @@ body { ### display: flow-root -Современный способ решения этой проблемы — это использование значения `flow-root` свойства `display`. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите `overflow: auto` из вашего правила `.wrapper` и добавьте `display: flow-root`. Если предположить, что у вас [поддерживающий браузер](/ru/docs/Web/CSS/display#Browser_compatibility), блок будет очищаться. +Современный способ решения этой проблемы — это использование значения `flow-root` свойства `display`. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите `overflow: auto` из вашего правила `.wrapper` и добавьте `display: flow-root`. Если предположить, что у вас [поддерживающий браузер](/ru/docs/Web/CSS/display#browser_compatibility), блок будет очищаться. ```css .wrapper { diff --git a/files/ru/learn/css/css_layout/grids/index.md b/files/ru/learn/css/css_layout/grids/index.md index ebddcc55a4b305..a2845b3779b2f4 100644 --- a/files/ru/learn/css/css_layout/grids/index.md +++ b/files/ru/learn/css/css_layout/grids/index.md @@ -5,9 +5,9 @@ slug: Learn/CSS/CSS_layout/Grids {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}Сетки (grids) являются установленным инструментом проектирования и многие современные макеты веб-сайта основаны на регулярной сетке. В этой статье мы рассмотрим дизайн на основе сетки и увидим как CSS можно использовать для создания сеток — как с помощью современных инструментов, так и с помощью новых технологий, которые только начинают становиться доступными в браузерах. -| Необходимые навыки: | основы HTML(изучите [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), понимание как работает CSS (изучите [Introduction to CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) и [Styling boxes](/ru/docs/Learn/CSS/Styling_boxes).) | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Понять основные концепции, лежащие в основе систем компоновки сетки и как реализовать сетку на веб-странице. | +| Необходимые навыки: | основы HTML(изучите [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), понимание как работает CSS (изучите [Introduction to CSS](/ru/docs/Learn/CSS/First_steps) и [Styling boxes](/ru/docs/Learn/CSS/Building_blocks).) | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Понять основные концепции, лежащие в основе систем компоновки сетки и как реализовать сетку на веб-странице. | ## Что такое макет сетки (grid layout)? @@ -75,7 +75,7 @@ slug: Learn/CSS/CSS_layout/Grids ![](simple-grid-finished.png) -В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. [Changing the box model completely](/ru/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) для большего объяснения). +В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. [Changing the box model completely](/ru/docs/Learn/CSS/Building_blocks/The_box_model#changing_the_box_model_completely) для большего объяснения). ```css * { @@ -376,7 +376,7 @@ body { ``` > [!NOTE] -> Если вы использовали препроцессор, такой как [Sass](http://sass-lang.com/), вы могли бы создать простой mixin, чтобы вставить это значение для вас. +> Если вы использовали препроцессор, такой как [Sass](https://sass-lang.com/), вы могли бы создать простой mixin, чтобы вставить это значение для вас. ### Включение офсетных контейнеров в нашей сетке @@ -593,11 +593,11 @@ Skeleton - это более простая сетка, чем некоторы ## Родные CSS Сетки с Grid Layout -В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS ([CSS Grid Layout Module](/ru/docs/Web/CSS/CSS_Grid_Layout)). +В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS ([CSS Grid Layout Module](/ru/docs/Web/CSS/CSS_grid_layout)). В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» - это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить. -В Firefox, например, вам нужно перейти к URL-адресу `about: config`, выполнить поиск по предпочтению `layout.css.grid.enabled` и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив [Grid by Example](http://gridbyexample.com/browsers). +В Firefox, например, вам нужно перейти к URL-адресу `about: config`, выполнить поиск по предпочтению `layout.css.grid.enabled` и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив [Grid by Example](https://gridbyexample.com/browsers). Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решётки и даже ручные сетки, для этого требуется добавить `
` для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах. @@ -768,7 +768,7 @@ Skeleton - это более простая сетка, чем некоторы ### Активное обучение: Напишите свою собственную простую сетку -В макете «[Введение в CSS](/ru/docs/Learn/CSS/CSS_layout/Introduction)» мы включили раздел о [CSS-таблицах](/ru/docs/Learn/CSS/CSS_layout/Introduction#CSS_tables), который включал простой пример формы (см. Пример [css-tables-example.html live](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) и [исходный код](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html)). Мы хотели бы, чтобы вы взяли копию этого примера и выполните следующие действия: +В макете «[Введение в CSS](/ru/docs/Learn/CSS/CSS_layout/Introduction)» мы включили раздел о [CSS-таблицах](/ru/docs/Learn/CSS/CSS_layout/Introduction#css_tables), который включал простой пример формы (см. Пример [css-tables-example.html live](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) и [исходный код](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html)). Мы хотели бы, чтобы вы взяли копию этого примера и выполните следующие действия: 1. Удалите элементы `
` внутри `
` - вам больше не нужны эти данные, поскольку CSS-сетки могут обрабатывать размещение содержимого по строкам и столбцам для вас. 2. Используйте свойства сетки CSS, чтобы создать макет для вашей формы как можно ближе к оригиналу. Вам нужно будет установить ширину на содержащем элементе и подумать о том, как установить пробелы в столбцах, а также пробелы в строке. diff --git a/files/ru/learn/css/css_layout/introduction/index.md b/files/ru/learn/css/css_layout/introduction/index.md index c3e36d73477c5f..6f274c0cc7c575 100644 --- a/files/ru/learn/css/css_layout/introduction/index.md +++ b/files/ru/learn/css/css_layout/introduction/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Introduction В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберём некоторые концепции, которые будут рассмотрены в этой статье. -| Требования: | Базовые знания HTML (изучите [введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимание как работает CSS (изучите [введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Предоставить вам обзор методов компоновки страниц CSS. Каждый метод может быть изучен более подробно в последующих статьях. | +| Требования: | Базовые знания HTML (изучите [введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимание как работает CSS (изучите [введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Предоставить вам обзор методов компоновки страниц CSS. Каждый метод может быть изучен более подробно в последующих статьях. | Методы компоновки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье. @@ -55,11 +55,11 @@ slug: Learn/CSS/CSS_layout/Introduction Методы CSS, которыми вы можете управлять разметкой элементов: -- **Свойство {{cssxref("display")}}** — Стандартные значения `block`, `inline` или `inline-block` могут изменять поведение элементов в обычном потоке (см.подробнее [Types of CSS boxes](/ru/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes)). Также можно менять сами методы разметки такими значениями свойства `display`, как [CSS Grid](/ru/docs/Learn/CSS/CSS_layout/Grids) или [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox). +- **Свойство {{cssxref("display")}}** — Стандартные значения `block`, `inline` или `inline-block` могут изменять поведение элементов в обычном потоке (см.подробнее [Types of CSS boxes](/ru/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes)). Также можно менять сами методы разметки такими значениями свойства `display`, как [CSS Grid](/ru/docs/Learn/CSS/CSS_layout/Grids) или [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox). - **Floats** — Применение значения {{cssxref("float")}} типа `left` может заставить элемент блочного типа "прилепить" содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах. - **Свойство {{cssxref("position")}}** — Позволяет точно контролировать положение блоков внутри других блоков. `static` позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана. - **Макет Таблицы** — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью `display: table` и соответствующих свойств. -- **Multi-column layout** — [Многоколоночный макет](/ru/docs/Web/CSS/CSS_Columns) поможет расположить содержимое столбцами, как в газетах. +- **Multi-column layout** — [Многоколоночный макет](/ru/docs/Web/CSS/CSS_multicol_layout) поможет расположить содержимое столбцами, как в газетах. ## Свойство display @@ -71,7 +71,7 @@ slug: Learn/CSS/CSS_layout/Introduction ## Flexbox -Flexbox (сокращение от [Flexible Box Layout](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout)) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство `display: flex` для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере. +Flexbox (сокращение от [Flexible Box Layout](/ru/docs/Web/CSS/CSS_flexible_box_layout)) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство `display: flex` для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере. Разметка HTML, представленная ниже, состоит из элемента `wrapper`, включающего в себя три {{htmlelement("div")}} элемента. По умолчанию все они будут изображаться как блочные, один под другим. diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.md b/files/ru/learn/css/css_layout/multiple-column_layout/index.md index 508c481bba35fe..97b6f8bc315218 100644 --- a/files/ru/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Multiple-column_Layout Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию. -| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете. | +| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете. | ## Базовый пример @@ -516,6 +516,6 @@ body { ## Смотрите также - [CSS Фрагментация](/ru/docs/Web/CSS/CSS_Fragmentation) -- [Применение макета с несколькими столбцами](/ru/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) +- [Применение макета с несколькими столбцами](/ru/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) {{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}} diff --git a/files/ru/learn/css/css_layout/normal_flow/index.md b/files/ru/learn/css/css_layout/normal_flow/index.md index 9734a319d3419f..9614954c77c267 100644 --- a/files/ru/learn/css/css_layout/normal_flow/index.md +++ b/files/ru/learn/css/css_layout/normal_flow/index.md @@ -9,9 +9,9 @@ slug: Learn/CSS/CSS_layout/Normal_Flow Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию. -| Что нужно знать прежде чем изучать: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимания как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Цель: | Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения. | +| Что нужно знать прежде чем изучать: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимания как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения. | Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путём изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним. diff --git a/files/ru/learn/css/css_layout/positioning/index.md b/files/ru/learn/css/css_layout/positioning/index.md index f86b3dcd9de191..56525ce54449e5 100644 --- a/files/ru/learn/css/css_layout/positioning/index.md +++ b/files/ru/learn/css/css_layout/positioning/index.md @@ -7,11 +7,11 @@ slug: Learn/CSS/CSS_layout/Positioning Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения {{cssxref("position")}} и как их использовать. -| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить как работает CSS позиционирование. | +| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Изучить как работает CSS позиционирование. | -Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию [`0_basic-flow.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html) из нашего GitHub репозитория ([исходный код здесь](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html)) и используйте его как отправную точку. +Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию [`0_basic-flow.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html) из нашего GitHub репозитория ([исходный код здесь](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html)) и используйте его как отправную точку. ## Введение в позиционирование @@ -41,7 +41,7 @@ slug: Learn/CSS/CSS_layout/Positioning И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию! > [!NOTE] -> Вы можете посмотреть живой пример на данном этапе на [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)). +> Вы можете посмотреть живой пример на данном этапе на [`1_static-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)). ### Относительное позиционирование @@ -63,7 +63,7 @@ left: 30px; ``` > [!NOTE] -> Значения этих свойств могут принимать любые [единицы](/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д. +> Значения этих свойств могут принимать любые [единицы](/ru/docs/Learn/CSS/Building_blocks/Values_and_units) которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д. Если вы сейчас сохраните и обновите, вы получите примерно такой результат: @@ -127,7 +127,7 @@ span { Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали `top: 30px;`, сила толкает блок, заставляя его перемещаться вниз на 30px. > [!NOTE] -> Вы можете посмотреть пример на этом этапе на [`2_relative-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)). +> Вы можете посмотреть пример на этом этапе на [`2_relative-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)). ### Абсолютное позиционирование @@ -207,11 +207,11 @@ span { > Да, значения `margin` все ещё влияют на позиционируемый элемент. Однако, схлопывания `margin` не происходит. > [!NOTE] -> Вы можете посмотреть пример на этом этапе на [`3_absolute-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)). +> Вы можете посмотреть пример на этом этапе на [`3_absolute-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)). ### Контекст позиционирования -Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. [Определение содержащего блока](/ru/docs/Web/CSS/Containing_block#Identifying_the_containing_block)). +Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. [Определение содержащего блока](/ru/docs/Web/CSS/Containing_block#identifying_the_containing_block)). Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в **исходным содержащем блоке**. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент {{htmlelement("html")}}. Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра. @@ -283,7 +283,7 @@ span { Позиционируемый элемент теперь располагается относительно элемента {{htmlelement("body")}}. > [!NOTE] -> Вы можете посмотреть живой пример на этом этапе на [`4_positioning-context.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)). +> Вы можете посмотреть живой пример на этом этапе на [`4_positioning-context.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)). ### Введение в z-index @@ -382,7 +382,7 @@ p:nth-of-type(1) { Обратите внимание что `z-index` принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000. > [!NOTE] -> Вы можете посмотреть живой пример на этом этапе на [`5_z-index.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)). +> Вы можете посмотреть живой пример на этом этапе на [`5_z-index.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)). ### Фиксированное позиционированиее @@ -485,7 +485,7 @@ p:nth-of-type(1) { {{ EmbedLiveSample('Фиксированное_позиционированиее', '100%', 400) }} > [!NOTE] -> Вы можете посмотреть живой пример на этом этапе на [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). +> Вы можете посмотреть живой пример на этом этапе на [`6_fixed-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). ### position: sticky @@ -659,7 +659,7 @@ dt { Липкие элементы являются "липкими" относительно ближайшего предка с "прокручивающимся механизмом", который определяется свойством [позиции](/ru/docs/Web/CSS/position) его предка. > [!NOTE] -> Вы можете посмотреть живой пример на этом этапе на [`7_sticky-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)). +> Вы можете посмотреть живой пример на этом этапе на [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)). ## Проверь свои навыки! diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.md b/files/ru/learn/css/css_layout/practical_positioning_examples/index.md index ad5d7d226aaa11..1bbf4d7a3eff5d 100644 --- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием. -| Предпосылки: | Основы HTML (уроки [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и идея о том, как работает CSS (уроки [Introduction to CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) | -| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Чтобы получить представление о практичности позиционирования | +| Предпосылки: | Основы HTML (уроки [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и идея о том, как работает CSS (уроки [Introduction to CSS](/ru/docs/Learn/CSS/First_steps).) | +| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Чтобы получить представление о практичности позиционирования | ## Информационный блок с вкладками @@ -17,7 +17,7 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples ![](tabbed-info-box.png) -> **Примечание:**Вы можете увидеть, что готовый пример работает в прямом эфире [info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). Проверьте его, чтобы понять, что вы будете строить в этом разделе статьи. +> **Примечание:**Вы можете увидеть, что готовый пример работает в прямом эфире [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). Проверьте его, чтобы понять, что вы будете строить в этом разделе статьи. Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность. @@ -245,7 +245,7 @@ In our second example, we will take our first example — our info-box — and a ![](fixed-info-box.png) > [!NOTE] -> You can see the finished example running live at [fixed-info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). Check it out to get an idea of what you will be building in this section of the article. +> You can see the finished example running live at [fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). Check it out to get an idea of what you will be building in this section of the article. As a starting point, you can use your completed example from the first section of the article, or make a local copy of [info-box.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html) from our Github repo. @@ -328,7 +328,7 @@ Our finished example will look like this: ![](hidden-sliding-panel.png) > [!NOTE] -> You can see the finished example running live at [hidden-info-panel.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). Check it out to get an idea of what you will be building in this section of the article. +> You can see the finished example running live at [hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). Check it out to get an idea of what you will be building in this section of the article. As a starting point, make a local copy of [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file: diff --git a/files/ru/learn/css/css_layout/responsive_design/index.md b/files/ru/learn/css/css_layout/responsive_design/index.md index 3dfb9d240e1825..8741451ac9a862 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.md +++ b/files/ru/learn/css/css_layout/responsive_design/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Responsive_Design На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция _отзывчивого (адаптивного) веб-дизайна_ _(responsive web design_ (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его. -| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) и [Устройство CSS](/ru/docs/Learn/CSS/Building_blocks).) | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Понять базовые концепции и историю отзывчивого дизайна. | +| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps) и [Устройство CSS](/ru/docs/Learn/CSS/Building_blocks).) | +| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Понять базовые концепции и историю отзывчивого дизайна. | ## Исторические макеты сайтов @@ -33,7 +33,7 @@ slug: Learn/CSS/CSS_layout/Responsive_Design > Посмотрите этот простой макет с фиксированной шириной: [пример](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html), [исходный код](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html). Снова изучите результат по мере изменения размера окна браузера. > [!NOTE] -> Скриншоты выше сделаны используя [Responsive Design Mode](/ru/docs/Tools/Responsive_Design_Mode) в Firefox DevTools. +> Скриншоты выше сделаны используя [Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html) в Firefox DevTools. Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие _m.example.com_ или _example.mobi_). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта. @@ -41,7 +41,7 @@ slug: Learn/CSS/CSS_layout/Responsive_Design ## Гибкий макет до отзывчивого дизайна -Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост [Resolution dependent layout](http://www.themaninblue.com/writing/perspective/2004/09/21/), описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS. +Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост [Resolution dependent layout](https://www.themaninblue.com/writing/perspective/2004/09/21/), описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS. Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером. @@ -50,8 +50,8 @@ slug: Learn/CSS/CSS_layout/Responsive_Design Термин адаптивный дизайн был [Придуман Итаном Маркоттом в 2010 году](https://alistapart.com/article/responsive-web-design/) и описывал использование трёх методов в сочетании. 1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - [Fluid Grids](https://alistapart.com/article/fluidgrids/) (опубликовано в 2009 в A List Apart). -2. Вторым методом была идея [жидких изображений](http://unstoppablerobotninja.com/entry/fluid-images). Используя очень простой метод настройки свойства `max-width` на `100%`, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения. -3. Третьим ключевым компонентом были [медиавыражения](/ru/docs/Web/CSS/Media_Queries). Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию. +2. Вторым методом была идея [жидких изображений](https://unstoppablerobotninja.com/entry/fluid-images). Используя очень простой метод настройки свойства `max-width` на `100%`, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения. +3. Третьим ключевым компонентом были [медиавыражения](/ru/docs/Web/CSS/CSS_media_queries). Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию. Очень важно понять, что **адаптивный веб-дизайн** — **это не отдельная технология**, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще. @@ -75,7 +75,7 @@ slug: Learn/CSS/CSS_layout/Responsive_Design Общим подходом при использовании медиавыражений является создание простого одноколоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана, чтобы уместить все. Такой подход часто называют **mobile first** дизайном. -Узнать больше о [медиавыражениях](/ru/docs/Web/CSS/Media_Queries) можно в документации MDN. +Узнать больше о [медиавыражениях](/ru/docs/Web/CSS/CSS_media_queries) можно в документации MDN. ## Гибкие сетки @@ -136,7 +136,7 @@ target / context = result В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения `flex-grow` и `flex-shrink` вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя. -В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись `flex: 1` как описано в главе [Flexbox: Гибкое изменение размеров flex элементов](/ru/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items). +В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись `flex: 1` как описано в главе [Flexbox: Гибкое изменение размеров flex элементов](/ru/docs/Learn/CSS/CSS_layout/Flexbox#flexible_sizing_of_flex_items). ```css .container { @@ -153,7 +153,7 @@ target / context = result ### CSS grid -В макете CSS Grid единицы измерения `fr` позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером `1fr`. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе [Гибкие grids с единицами fr](/ru/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit). +В макете CSS Grid единицы измерения `fr` позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером `1fr`. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе [Гибкие grids с единицами fr](/ru/docs/Learn/CSS/CSS_layout/Grids#flexible_grids_with_the_fr_unit). ```css .container { diff --git a/files/ru/learn/css/first_steps/how_css_works/index.md b/files/ru/learn/css/first_steps/how_css_works/index.md index a76c3aefd738e8..7bdc72618938e5 100644 --- a/files/ru/learn/css/first_steps/how_css_works/index.md +++ b/files/ru/learn/css/first_steps/how_css_works/index.md @@ -8,9 +8,9 @@ slug: Learn/CSS/First_steps/How_CSS_works Мы уже изучили основы CSS, для чего он нужен и как создавать простые таблицы стилей. В этом уроке мы посмотрим, как браузер обрабатывает CSS и HTML и выводит содержимое на веб-страницу. -| Необходимые знания: | Основы компьютерной грамотности, [базовое программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения), умение [умение работать с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) и начальные знания HTML (рекомендуется изучить [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML)). | -| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили | +| Необходимые знания: | Основы компьютерной грамотности, [базовое программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), умение [умение работать с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) и начальные знания HTML (рекомендуется изучить [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)). | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Задача: | Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили | ## Как работает CSS? @@ -103,7 +103,7 @@ span { ## Что происходит, когда браузер не понимает CSS? -[В предыдущем уроке](/ru/docs/Learn/CSS/First_steps/Что_такое_CSS#Поддержка_браузера) я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт? +[В предыдущем уроке](/ru/docs/Learn/CSS/First_steps/What_is_CSS#поддержка_браузера) я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт? — Да ничего: браузер просто пропустит это! @@ -140,6 +140,6 @@ p { ## Завершение -Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в [использовании ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge). +Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в [использовании ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Styling_a_biography_page). {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} diff --git a/files/ru/learn/css/first_steps/index.md b/files/ru/learn/css/first_steps/index.md index 82b82c7bc4e252..69b3c15110732d 100644 --- a/files/ru/learn/css/first_steps/index.md +++ b/files/ru/learn/css/first_steps/index.md @@ -30,7 +30,7 @@ CSS (каскадные таблицы стилей) используется д - : Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными. - [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works) - : Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берёт CSS и HTML и превращает их в веб-страницу. -- [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge) +- [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Styling_a_biography_page) - : С учётом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам шанс сделать это. ## Смотрите также diff --git a/files/ru/learn/css/first_steps/what_is_css/index.md b/files/ru/learn/css/first_steps/what_is_css/index.md index ffef4cf3e4dbf0..0e657bb93b3ea5 100644 --- a/files/ru/learn/css/first_steps/what_is_css/index.md +++ b/files/ru/learn/css/first_steps/what_is_css/index.md @@ -28,7 +28,7 @@ slug: Learn/CSS/First_steps/What_is_CSS > [!NOTE] > Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати. -CSS может использоваться для очень простой стилизации текста документа, например, изменение [цвета](/ru/docs/Web/CSS/color_value) и [размера](/ru/docs/Web/CSS/font-size) заголовков и ссылок. Он может быть использован для создания макета, например, [превращение одного столбца текста в макет](/ru/docs/Web/CSS/Layout_cookbook/Column_layouts) с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как [анимация](/ru/docs/Web/CSS/CSS_Animations). Посмотрите на ссылки в этом параграфе для конкретных примеров. +CSS может использоваться для очень простой стилизации текста документа, например, изменение [цвета](/ru/docs/Web/CSS/color_value) и [размера](/ru/docs/Web/CSS/font-size) заголовков и ссылок. Он может быть использован для создания макета, например, [превращение одного столбца текста в макет](/ru/docs/Web/CSS/Layout_cookbook/Column_layouts) с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как [анимация](/ru/docs/Web/CSS/CSS_animations). Посмотрите на ссылки в этом параграфе для конкретных примеров. ## Синтаксис CSS @@ -49,7 +49,7 @@ h1 { Затем у нас есть набор фигурных скобок `{ }`. Внутри них будет один или несколько **объявлений**, которые принимают форму пары **свойства** и его **значения**. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству. -Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство `color`, которое может принимать различные [цветовые значения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#Color). У нас также есть свойство `font-size`. Это свойство может принимать различные [значения размера](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages), как и свойства. +Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство `color`, которое может принимать различные [цветовые значения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#color). У нас также есть свойство `font-size`. Это свойство может принимать различные [значения размера](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages), как и свойства. Таблица стилей CSS будет содержать много таких правил, написанных одно за другим. @@ -89,7 +89,7 @@ CSS ничем не отличается — он разработан груп ## Информация о совместимости с браузерами -После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)[.](/ru/docs/) Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN вы можете видеть статус интересующего вас свойства, чтобы вы могли определить, сможете ли вы использовать её на веб-сайте. +После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)[.](/ru/docs/Web) Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN вы можете видеть статус интересующего вас свойства, чтобы вы могли определить, сможете ли вы использовать её на веб-сайте. ## Что дальше? diff --git a/files/ru/learn/css/howto/css_faq/index.md b/files/ru/learn/css/howto/css_faq/index.md index 4c56f151dbd79b..1000d072515ce0 100644 --- a/files/ru/learn/css/howto/css_faq/index.md +++ b/files/ru/learn/css/howto/css_faq/index.md @@ -54,13 +54,13 @@ Use a class-specific style when you want to apply the styling rules to many bloc Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique). -See [CSS selectors](/ru/docs/CSS/Getting_Started/Selectors) +See [CSS selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors) ## How do I restore the default value of a property? Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property. -This has changed with CSS 2; the keyword [initial](/es/CSS/initial) is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property. +This has changed with CSS 2; the keyword [initial](/ru/docs/Web/CSS/initial) is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property. ## How do I derive one style from another? @@ -166,7 +166,7 @@ The use of the \* selector should be minimized as it is a slow selector, especia ### Specificity in CSS -When multiples rules apply to a certain element, the rule chosen depends on its style [specificity](/ru/docs/CSS/Specificity). Inline style (in HTML `style` attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors. +When multiples rules apply to a certain element, the rule chosen depends on its style [specificity](/ru/docs/Web/CSS/Specificity). Inline style (in HTML `style` attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors. ``` div { color: black; } @@ -176,7 +176,7 @@ div { color: black; }
This is red
``` -The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the [CSS 2.1 Specification chapter 6.4.3](http://www.w3.org/TR/CSS21/cascade.html#specificity). +The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the [CSS 2.1 Specification chapter 6.4.3](https://www.w3.org/TR/CSS21/cascade.html#specificity). ## What do the -moz-\*, -ms-\*, -webkit-\*, -o-\* and -khtml-\* properties do? @@ -184,7 +184,7 @@ These properties, called _prefixed properties_, are extensions to the CSS standa The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves. -Please see the [Mozilla CSS Extensions](/ru/docs/CSS/CSS_Reference/Mozilla_Extensions) page for more information on the Mozilla-prefixed CSS properties. +Please see the [Mozilla CSS Extensions](/ru/docs/Web/CSS/Mozilla_Extensions) page for more information on the Mozilla-prefixed CSS properties. ## How does z-index relate to positioning? diff --git a/files/ru/learn/css/howto/index.md b/files/ru/learn/css/howto/index.md index 97c989cd2220c9..f3f7f22f268675 100644 --- a/files/ru/learn/css/howto/index.md +++ b/files/ru/learn/css/howto/index.md @@ -11,37 +11,37 @@ slug: Learn/CSS/Howto ### Основы -- [Как применить CSS к HTML](/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML) -- [Как использовать пробелы в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space) -- [Как писать комментарии в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments) -- [Как выбрать элементы через имя элемента, класс или ID](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors) -- [Как выбрать элементы через имя атрибута и содержания](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors) -- [Как использовать псевдоклассы](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes) -- [Как использовать псевдо-элементы](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements) -- [Как применить несколько селекторов к тому же правилу](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule) -- [Как определить цвета в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors) -- [Как отлаживать CSS в браузере](/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS) +- [Как применить CSS к HTML](/ru/docs/Learn/CSS/First_steps/How_CSS_works#how_to_apply_your_css_to_your_html) +- [Как использовать пробелы в CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured#white_space) +- [Как писать комментарии в CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured#comments) +- [Как выбрать элементы через имя элемента, класс или ID](/ru/docs/Learn/CSS/Building_blocks/Selectors#simple_selectors) +- [Как выбрать элементы через имя атрибута и содержания](/ru/docs/Learn/CSS/Building_blocks/Selectors#attribute_selectors) +- [Как использовать псевдоклассы](/ru/docs/Learn/CSS/Building_blocks/Selectors#pseudo-classes) +- [Как использовать псевдо-элементы](/ru/docs/Learn/CSS/Building_blocks/Selectors#pseudo-elements) +- [Как применить несколько селекторов к тому же правилу](/ru/docs/Learn/CSS/Building_blocks/Selectors#multiple_selectors_on_one_rule) +- [Как определить цвета в CSS](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#colors) +- [Как отлаживать CSS в браузере](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS#inspecting_the_dom_and_css) ### CSS и текст - [Как стилизовать текст](/ru/docs/Learn/CSS/Styling_text/Fundamentals) - [How to customize a list of elements](/ru/docs/Learn/CSS/Styling_text/Styling_lists) -- [Как стилизовать ссылки](/en-US/Learn/CSS/Styling_text/Styling_links) -- [How to add shadows to text](/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows) +- [Как стилизовать ссылки](/ru/docs/Learn/CSS/Styling_text/Styling_links) +- [How to add shadows to text](/ru/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows) ### Блоки и разметка -- [How to size CSS boxes](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties) -- [How to control overflowing content](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow) -- [How to control the part of a CSS box that the background is drawn under](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip) -- [How do I define inline, block, and inline-block?](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes) -- [How to create fancy boxes](/ru/docs/Learn/CSS/Howto/create_fancy_boxes) (also see the [Styling boxes](/ru/docs/Learn/CSS/Styling_boxes) module, generally). -- [How to use `background-clip` to control how much of the box your background image covers](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip). -- [How to change the box model completely using `box-sizing`](/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) -- [How to control backgrounds](/en-US/Learn/CSS/Styling_boxes/Backgrounds) -- [How to control borders](/en-US/Learn/CSS/Styling_boxes/Borders) -- [How to style an HTML table](/en-US/Learn/CSS/Styling_boxes/Styling_tables) -- [How to add shadows to boxes](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows) +- [How to size CSS boxes](/ru/docs/Learn/CSS/Building_blocks/The_box_model#box_properties) +- [How to control overflowing content](/ru/docs/Learn/CSS/Building_blocks/The_box_model#overflow) +- [How to control the part of a CSS box that the background is drawn under](/ru/docs/Learn/CSS/Building_blocks/The_box_model#background_clip) +- [How do I define inline, block, and inline-block?](/ru/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes) +- [How to create fancy boxes](/ru/docs/Learn/CSS/Howto/create_fancy_boxes) (also see the [Styling boxes](/ru/docs/Learn/CSS/Building_blocks) module, generally). +- [How to use `background-clip` to control how much of the box your background image covers](/ru/docs/Learn/CSS/Building_blocks/The_box_model#background_clip). +- [How to change the box model completely using `box-sizing`](/ru/docs/Learn/CSS/Building_blocks/The_box_model#changing_the_box_model_completely) +- [How to control backgrounds](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +- [How to control borders](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) +- [How to style an HTML table](/ru/docs/Learn/CSS/Building_blocks/Styling_tables) +- [How to add shadows to boxes](/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#box_shadows) ## Необычное или передовые технологии @@ -49,19 +49,19 @@ Beyond the basics, CSS is allows very advanced design techniques. These articles ### Общие -- [How to calculate specificity of a CSS selector](/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity) -- [How to control inheritance in CSS](/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance) +- [How to calculate specificity of a CSS selector](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity) +- [How to control inheritance in CSS](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#controlling_inheritance) ### Дополнительные эффекты -- [How to use filters in CSS](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters) -- [How to use blend modes in CSS](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes) +- [How to use filters in CSS](/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#filters) +- [How to use blend modes in CSS](/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects#blend_modes) ### Разметка -- [Using CSS flexible boxes](/ru/docs/Web/Guide/CSS/Flexible_boxes) -- [Using CSS multi-column layouts](/ru/docs/Web/Guide/CSS/Using_multi-column_layouts) -- [Using CSS generated content](/ru/docs/Web/Guide/CSS/Getting_started/Content) +- [Using CSS flexible boxes](/ru/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Using CSS multi-column layouts](/ru/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) +- [Using CSS generated content](/ru/docs/Learn/CSS/Howto/Generated_content) ## Смотрите также diff --git a/files/ru/learn/css/index.md b/files/ru/learn/css/index.md index af22dc059cee29..58a1e0b81e3de1 100644 --- a/files/ru/learn/css/index.md +++ b/files/ru/learn/css/index.md @@ -13,7 +13,7 @@ slug: Learn/CSS > > Мы составили курс, который содержит всю необходимую информацию для достижения этой цели. > -> [**Начать изучение курса**](/ru/docs/Learn/Front-end_web_developer) +> [**Начать изучение курса**](/en-US/curriculum/) ## Необходимые условия diff --git a/files/ru/learn/css/styling_text/fundamentals/index.md b/files/ru/learn/css/styling_text/fundamentals/index.md index 7aabedfdc4822a..6ef5451e5ad230 100644 --- a/files/ru/learn/css/styling_text/fundamentals/index.md +++ b/files/ru/learn/css/styling_text/fundamentals/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Styling_text/Fundamentals В данной статье мы начнём путь к овладению стилизацией текста при помощи {{glossary("CSS")}}. Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы. -| Необходимые знания: | Базовые компьютерные знания, Основы HTML (раздел [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML)), основы CSS (раздел [Введение в CSS](/ru/docs/Learn/CSS/First_steps)). | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить основные свойства и техники, необходимые для стилизации текста на веб-страницах. | +| Необходимые знания: | Базовые компьютерные знания, Основы HTML (раздел [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), основы CSS (раздел [Введение в CSS](/ru/docs/Learn/CSS/First_steps)). | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Задача: | Изучить основные свойства и техники, необходимые для стилизации текста на веб-страницах. | ## Что участвует в стилизации текста в CSS? @@ -44,13 +44,13 @@ slug: Learn/CSS/Styling_text/Fundamentals

``` -You can find the [finished example on GitHub](http://mdn.github.io/learning-area/css/styling-text/fundamentals/) (see also [the source code](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html).) +You can find the [finished example on GitHub](https://mdn.github.io/learning-area/css/styling-text/fundamentals/) (see also [the source code](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html).) ### Color The {{cssxref("color")}} property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the {{cssxref("text-decoration")}} property). -`color` can accept any [CSS color unit](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors), for example: +`color` can accept any [CSS color unit](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#colors), for example: ```css p { @@ -173,7 +173,7 @@ This gives us the following result: ### Font size -In our previous module's [CSS values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units) article, we reviewed length and size units. Font size (set with the {{cssxref("font-size")}} property) can take values measured in most of these units (and others, such as [percentages](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages)), however the most common units you'll use to size text are: +In our previous module's [CSS values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units) article, we reviewed length and size units. Font size (set with the {{cssxref("font-size")}} property) can take values measured in most of these units (and others, such as [percentages](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#percentages)), however the most common units you'll use to size text are: - `px` (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation. - `em`s: 1 `em` is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. Why bother? It is quite natural once you get used to it, and you can use `em` to size everything, not just text. You can have an entire website sized using `em`, which makes maintenance easy. @@ -316,10 +316,10 @@ text-shadow: 4px 4px 5px red; The four properties are as follows: -1. The horizontal offset of the shadow from the original text — this can take most available CSS [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size), but you'll most commonly use `px`; positive values move the shadow right, and negative values left. This value has to be included. +1. The horizontal offset of the shadow from the original text — this can take most available CSS [length and size units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size), but you'll most commonly use `px`; positive values move the shadow right, and negative values left. This value has to be included. 2. The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included. -3. The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size). -4. The base color of the shadow, which can take any [CSS color unit](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors). If not included, it defaults to `black`. +3. The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS [length and size units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size). +4. The base color of the shadow, which can take any [CSS color unit](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#colors). If not included, it defaults to `black`. #### Multiple shadows @@ -374,7 +374,7 @@ p { {{ EmbedLiveSample('Hidden_example1', '100%', 260) }} > [!NOTE] -> You can see more interesting examples of `text-shadow` usage in the Sitepoint article [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/). +> You can see more interesting examples of `text-shadow` usage in the Sitepoint article [Moonlighting with CSS text-shadow](https://www.sitepoint.com/moonlighting-css-text-shadow/). ## Text layout @@ -434,7 +434,7 @@ p { ### Line height -The {{cssxref("line-height")}} property sets the height of each line of text — this can take most [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size), but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the `line-height`. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this: +The {{cssxref("line-height")}} property sets the height of each line of text — this can take most [length and size units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size), but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the `line-height`. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this: ```css line-height: 1.6; @@ -486,7 +486,7 @@ p { ### Letter and word spacing -The {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size). +The {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most [length and size units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size). So as an example, we could apply some word- and letter-spacing to the first line of each {{htmlelement("p")}} element in our example: @@ -690,4 +690,4 @@ We hoped you enjoyed playing with text in this article! The next article will gi - [Styling lists](/ru/docs/Learn/CSS/Styling_text/Styling_lists) - [Styling links](/ru/docs/Learn/CSS/Styling_text/Styling_links) - [Web fonts](/ru/docs/Learn/CSS/Styling_text/Web_fonts) -- [Typesetting a community school homepage](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage) +- [Typesetting a community school homepage](/ru/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/ru/learn/css/styling_text/styling_links/index.md b/files/ru/learn/css/styling_text/styling_links/index.md index b9c7f6b3e04405..3b8c8e7a4d6009 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.md +++ b/files/ru/learn/css/styling_text/styling_links/index.md @@ -361,7 +361,7 @@ a[href*="http"] { Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод! > [!NOTE] -> Не переживайте если вы ещё не знакомы с [фоном](/ru/docs/Learn/CSS/Building_blocks) и [адаптивным (отзывчивым) веб-дизайном](/ru/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks); это объяснено в других местах +> Не переживайте если вы ещё не знакомы с [фоном](/ru/docs/Learn/CSS/Building_blocks) и [адаптивным (отзывчивым) веб-дизайном](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design); это объяснено в других местах ## Стилизация ссылок в виде кнопок diff --git a/files/ru/learn/css/styling_text/styling_lists/index.md b/files/ru/learn/css/styling_text/styling_lists/index.md index 578a682135e264..f0dc6ade3d0e06 100644 --- a/files/ru/learn/css/styling_text/styling_lists/index.md +++ b/files/ru/learn/css/styling_text/styling_lists/index.md @@ -73,7 +73,7 @@ HTML для нашего примера списка представлен ни ``` -Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя [инструменты разработчика браузера](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools), то вы заметите несколько стилей установленных по умолчанию: +Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя [инструменты разработчика браузера](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools), то вы заметите несколько стилей установленных по умолчанию: - Элементы {{htmlelement("ul")}} и {{htmlelement("ol")}} имеют верхний и нижний {{cssxref("margin")}} по `16px` (`1em`) и {{cssxref("padding-left")}} `40px` (`2.5em`.) - Объекты списка (элементы {{htmlelement("li")}}) не имеют заданных значений по умолчанию для интервалов. diff --git a/files/ru/learn/css/styling_text/web_fonts/index.md b/files/ru/learn/css/styling_text/web_fonts/index.md index 250f459757765e..584dde9bb4bef2 100644 --- a/files/ru/learn/css/styling_text/web_fonts/index.md +++ b/files/ru/learn/css/styling_text/web_fonts/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/Styling_text/Web_fonts В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста. -| Предварительные требования: | Основная компьютерная грамотность, основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), основы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS)), [Основы CSS текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals). | -| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Задача: | Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно. | +| Предварительные требования: | Основная компьютерная грамотность, основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), основы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps)), [Основы CSS текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals). | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Задача: | Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно. | ## Краткое повторение семейств шрифтов @@ -21,7 +21,7 @@ p { } ``` -Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые [Безопасные веб-шрифты](/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts). Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д. +Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые [Безопасные веб-шрифты](/ru/docs/Learn/CSS/Styling_text/Fundamentals#web_safe_fonts). Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д. ## Веб-шрифты @@ -58,7 +58,7 @@ html { Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. Сложно продемонстрировать это на встроенном живом примере, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса -Вы должны использовать файлы [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) и [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) как отправную точку добавляя в них ваш код (см. [живой пример](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html)). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле `web-font-start.css` вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера. +Вы должны использовать файлы [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) и [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) как отправную точку добавляя в них ваш код (см. [живой пример](https://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html)). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле `web-font-start.css` вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера. ### Поиск шрифтов @@ -111,7 +111,7 @@ font-family: "zantrokeregular", serif; ![](web-font-example.png) > [!NOTE] -> Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) и [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) ([run the finished example live](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)). +> Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) и [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) ([run the finished example live](https://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)). ## Использование онлайн-сервиса шрифтов @@ -127,7 +127,7 @@ font-family: "zantrokeregular", serif; 6. Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML. > [!NOTE] -> Вы можете найти законченные версии [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) и [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), если вам необходимо сверить вашу работу с нашей ([см. live](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)). +> Вы можете найти законченные версии [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) и [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), если вам необходимо сверить вашу работу с нашей ([см. live](https://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)). ## @font-face более детально diff --git a/files/ru/learn/forms/styling_web_forms/index.md b/files/ru/learn/forms/styling_web_forms/index.md index 143efe35a5564a..9fdbbbb1324606 100644 --- a/files/ru/learn/forms/styling_web_forms/index.md +++ b/files/ru/learn/forms/styling_web_forms/index.md @@ -48,7 +48,7 @@ The main issue with all these widgets, comes from the fact that they have a very ## Basic styling -To style [elements that are easy to style](/ru/docs/Learn/Forms/Styling_web_forms#the_good) with CSS, you shouldn't face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way. +To style [elements that are easy to style](#the_good) with CSS, you shouldn't face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way. ### Search fields diff --git a/files/ru/learn/forms/user_input_methods/index.md b/files/ru/learn/forms/user_input_methods/index.md index f31d67501e1a67..bbf880f21fec31 100644 --- a/files/ru/learn/forms/user_input_methods/index.md +++ b/files/ru/learn/forms/user_input_methods/index.md @@ -154,7 +154,7 @@ In open web apps any DOM element can be made directly editable using the [`conte ## Examples -- **[Tracking multiple touch points at a time](/en-US/DOM/Touch_events#example)** +- **[Tracking multiple touch points at a time](/ru/docs/Web/API/Touch_events#example)** - : This example tracks multiple touch points at a time, allowing the user to draw in a `{{htmlelement("canvas")}}` with more than one finger at a time. It will only work on a browser that supports touch events. - **[Simple pointer lock demo](/ru/docs/Web/API/Pointer_Lock_API#example)** - : We've written a simple pointer lock demo to show you how to use it to set up a simple control system. The demo uses JavaScript to draw a ball inside a `{{htmlelement("canvas")}}` element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.md b/files/ru/learn/getting_started_with_the_web/css_basics/index.md index 39262335abf4a0..57c0dddb15e845 100644 --- a/files/ru/learn/getting_started_with_the_web/css_basics/index.md +++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.md @@ -88,7 +88,7 @@ h1 { | Селектор атрибута | Элемент(ы) на странице с указанным атрибутом. | `img[src]` Выбирает `` но не `` | | Селектор псевдокласса | Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора. | `a:hover` Выбирает ``, но только тогда, когда указатель мыши наведён на ссылку. | -Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем [Руководстве селекторов](/ru/docs/Web/Guide/CSS/Getting_started/Selectors). +Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем [Руководстве селекторов](/ru/docs/Learn/CSS/Building_blocks/Selectors). ## Шрифты и текст diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md index 9a0c95fae7ded9..39fe688f5a24a3 100644 --- a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md +++ b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -5,7 +5,7 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files {{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}} -Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге [загрузите их на сервер](/ru/Learn/Getting_started_with_the_web/Publishing_your_website). В статье _Работа с файлами_ обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта. +Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге [загрузите их на сервер](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website). В статье _Работа с файлами_ обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта. ## Где ваш веб-сайт должен располагаться на вашем компьютере? diff --git a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md index 121e3790cb8842..911606615a22bf 100644 --- a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md +++ b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md @@ -60,7 +60,7 @@ _Как работает Веб_ даст упрощённое представ ## Смотрите также -- [Как работает Интернет](/ru/Learn/How_the_Internet_works) +- [Как работает Интернет](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) - [HTTP — Протокол уровня приложений](https://dev.opera.com/articles/http-basic-introduction/) - [HTTP: Давайте изучим его!](https://dev.opera.com/articles/http-lets-get-it-on/) - [HTTP: Коды ответов](https://dev.opera.com/articles/http-response-codes/) diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.md b/files/ru/learn/getting_started_with_the_web/html_basics/index.md index 7cf183b2d7e96c..2b36ec1dfa906e 100644 --- a/files/ru/learn/getting_started_with_the_web/html_basics/index.md +++ b/files/ru/learn/getting_started_with_the_web/html_basics/index.md @@ -74,7 +74,7 @@ HTML не является языком программирования; это ### Анатомия HTML документа -Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш `index.html` (с которым мы впервые встретились в статье [Работа с файлами](/ru/Learn/Getting_started_with_the_web/Dealing_with_files)): +Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш `index.html` (с которым мы впервые встретились в статье [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)): ```html @@ -147,7 +147,7 @@ HTML не является языком программирования; это

Это одиночный абзац

``` -Добавьте свой образец текста (вы создавали его в статье [_Каким должен быть ваш веб-сайт?_](/ru/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like)) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}. +Добавьте свой образец текста (вы создавали его в статье [_Каким должен быть ваш веб-сайт?_](/ru/docs/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like)) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}. ### Списки @@ -216,12 +216,12 @@ HTML не является языком программирования; это ## Заключение -Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете [посмотреть её здесь](http://mdn.github.io/beginner-html-site/)): +Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете [посмотреть её здесь](https://mdn.github.io/beginner-html-site/)): ![A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text](finished-test-page-small.png) Если вы застряли, вы всегда можете сравнить свою работу с нашим [готовым примером кода](https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html) на GitHub. -Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу [Обучение HTML: руководства и уроки](/ru/Learn/HTML). +Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу [Обучение HTML: руководства и уроки](/ru/docs/Learn/HTML). {{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}} diff --git a/files/ru/learn/getting_started_with_the_web/index.md b/files/ru/learn/getting_started_with_the_web/index.md index effdfd2aa60594..5a5e80ad9a467d 100644 --- a/files/ru/learn/getting_started_with_the_web/index.md +++ b/files/ru/learn/getting_started_with_the_web/index.md @@ -13,9 +13,9 @@ _Начало работы с Вебом_ - это серия коротких Прорабатывая статьи, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём! -### [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения) +### [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software) -Когда речь заходит об инструментах для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения) мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе. +Когда речь заходит об инструментах для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software) мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе. ### [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like) diff --git a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md index bb29ac982f8579..00dcd70c51cca6 100644 --- a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md +++ b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md @@ -11,8 +11,8 @@ slug: Learn/Getting_started_with_the_web/Installing_basic_software - **Компьютер**. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьёзной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux). - **Текстовый редактор**, чтобы писать код. Это может быть текстовый редактор (например, [Visual Studio Code](https://code.visualstudio.com/), [Notepad++](https://notepad-plus-plus.org/), [Sublime Text](https://www.sublimetext.com/), [Atom](https://atom.io/), [GNU Emacs](https://www.gnu.org/software/emacs/), или [VIM](https://www.vim.org/)) или гибридный редактор (например, [Dreamweaver](https://www.adobe.com/products/dreamweaver.html) or [WebStorm](https://www.jetbrains.com/webstorm/)). Офисные редакторы не подходят для этого, поскольку они зависят от скрытых элементов, которые мешают движкам рендеринга, используемым веб-браузерами. -- **Веб-браузеры**, для тестирования кода. В настоящее время наиболее часто используемые браузеры это [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), и [Internet Explorer](http://windows.microsoft.com/ru/internet-explorer/download-ie). Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). [Lynx](https://lynx.browser.org/), текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями. -- **Графический редактор**, такие как [The Gimp](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), или [Photoshop](http://www.adobe.com/uk/products/photoshop.html), чтобы создавать изображения для ваших веб-страниц. +- **Веб-браузеры**, для тестирования кода. В настоящее время наиболее часто используемые браузеры это [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](https://www.opera.com/), [Safari](https://www.apple.com/safari/), и [Internet Explorer](https://windows.microsoft.com/ru/internet-explorer/download-ie). Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). [Lynx](https://lynx.browser.org/), текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями. +- **Графический редактор**, такие как [The Gimp](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), или [Photoshop](https://www.adobe.com/uk/products/photoshop.html), чтобы создавать изображения для ваших веб-страниц. - **Система контроля версий**, чтобы управлять файлами на сервере, для совместной работы над проектом с командой, обмениваться кодом и избегать редакторских конфликтов. Сейчас [Git](http://git-scm.com/) является наиболее популярным инструментом контроля версий, и репозиторий кода [Github](https://github.com/), основанный на Git, также является очень популярным. - **FTP программа**, чтобы загружать веб-страницы на сервер для публичного просмотра. Существует обилие таких программ, доступных в том числе [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/), и [FileZilla](https://filezilla-project.org/). - **Система автоматизации**, такая как [Grunt](http://gruntjs.com/) или [Gulp](http://gulpjs.com/), для автоматического выполнения повторяющихся задач, например, минимизации кода и запуска тестов. @@ -33,14 +33,14 @@ slug: Learn/Getting_started_with_the_web/Installing_basic_software На данный момент, мы установим только пару настольных веб-браузеров, чтобы проверять наш код. Выберите вашу операционную систему ниже и нажмите на соответствующие ссылки для загрузки установочных программ ваших любимых браузеров: -- Linux: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Brave](https://brave.com). -- Windows: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Internet Explorer](http://windows.microsoft.com/ru/internet-explorer/download-ie), [Brave](https://brave.com) (Если у вас есть Windows 8 или выше, вы можете установить IE 10 или более позднюю версию; иначе, вам следует установить альтернативный браузер) -- Mac: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Brave](https://brave.com) (Safari поставляется с iOS и OS X по умолчанию) +- Linux: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](https://www.opera.com/), [Brave](https://brave.com). +- Windows: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](https://www.opera.com/), [Internet Explorer](https://windows.microsoft.com/ru/internet-explorer/download-ie), [Brave](https://brave.com) (Если у вас есть Windows 8 или выше, вы можете установить IE 10 или более позднюю версию; иначе, вам следует установить альтернативный браузер) +- Mac: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](https://www.opera.com/), [Safari](https://www.apple.com/safari/), [Brave](https://brave.com) (Safari поставляется с iOS и OS X по умолчанию) Прежде, чем идти дальше, вам следует установить, по крайней мере, два из этих браузеров, чтобы использовать их для тестирования. ### Установка локального веб-сервера -Некоторые примеры для успешной работы необходимо будет запустить на веб-сервере. Вы можете узнать, как это сделать в статье [Как настроить локальный сервер для тестирования?](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server) +Некоторые примеры для успешной работы необходимо будет запустить на веб-сервере. Вы можете узнать, как это сделать в статье [Как настроить локальный сервер для тестирования?](/ru/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) {{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}} diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md index 2c2e0f472ec170..e35b08670442d8 100644 --- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md +++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md @@ -61,7 +61,7 @@ JavaScript сам по себе довольно компактный, но оч Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало! -> **Предупреждение:** **Важно**: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью [Откройте для себя браузерные инструменты разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools). +> **Предупреждение:** **Важно**: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью [Откройте для себя браузерные инструменты разработчика](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools). ### Переменные @@ -207,7 +207,7 @@ multiply(0.5, 3); ### События -Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является [событие клика](/ru/docs/Web/Events/click), которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице: +Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является [событие клика](/ru/docs/Web/API/Element/click_event), которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице: ```js document.querySelector("html").onclick = function () { @@ -215,7 +215,7 @@ document.querySelector("html").onclick = function () { }; ``` -Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем {{htmlelement("html")}} элемент и устанавливаем ему обработчик свойства [`onclick`](/ru/docs/Web/API/GlobalEventHandlers.onclick) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика. +Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем {{htmlelement("html")}} элемент и устанавливаем ему обработчик свойства [`onclick`](/ru/docs/Web/API/Element/click_event) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика. Обратите внимание, что @@ -295,7 +295,7 @@ myHTML.onclick = function () {}; } ``` - Эта функция содержит функцию [`prompt()`](/ru/docs/Web/API/Window.prompt), которая вызывает диалоговое окно, немного похожее на `alert()` кроме того, что `prompt()` просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает **OK**. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием `localStorage`, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию `setItem()` из localStorage для создания и хранения данных в свойстве под названием `'name'`, и устанавливаем это значение в переменную `myName`, которая содержит имя введённое пользователем. В конце мы устанавливаем `textContent` заголовку в виде строки и имени пользователя. + Эта функция содержит функцию [`prompt()`](/ru/docs/Web/API/Window/prompt), которая вызывает диалоговое окно, немного похожее на `alert()` кроме того, что `prompt()` просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает **OK**. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием `localStorage`, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию `setItem()` из localStorage для создания и хранения данных в свойстве под названием `'name'`, и устанавливаем это значение в переменную `myName`, которая содержит имя введённое пользователем. В конце мы устанавливаем `textContent` заголовку в виде строки и имени пользователя. 4. Затем добавьте блок `if ... else` - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке: diff --git a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md index bbad0a37a8e3e8..442b17b9799624 100644 --- a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md +++ b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md @@ -116,7 +116,7 @@ The actual syntax for HTTP messages (called requests and responses) is not that Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include: -- The [developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) inside modern browsers that can be used to debug your code. +- The [developer tools](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) inside modern browsers that can be used to debug your code. - [Testing tools](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing) that can be used to run tests to show whether your code is behaving as you intended it to. - Libraries and frameworks built on top of JavaScript that allow you to build certain types of web site much more quickly and effectively. - So-called "Linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly. @@ -155,4 +155,4 @@ You'll come across the below concepts at some point in your studies. ## Смотрите также - [History of the World Wide Web](https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web) -- [How does the internet work?](/ru/docs/Learn/Common_questions/How_does_the_Internet_work) +- [How does the internet work?](/ru/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work) diff --git a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md index 9ba55b02be0cc9..b1232fa5d19a58 100644 --- a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md +++ b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md @@ -41,7 +41,7 @@ _Каким должен быть ваш веб-сайт?_ обсудите пл ### Цветовая схема -Чтобы выбрать цвет, перейдите в [инструмент выбора цвета](/ru/docs/Web/CSS/CSS_Colors/Color_picker_tool) и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, `#660066`. Это называется _шестнадцатеричный код (hex(adecimal) code)_ и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас. +Чтобы выбрать цвет, перейдите в [инструмент выбора цвета](/ru/docs/Web/CSS/CSS_colors/Color_picker_tool) и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, `#660066`. Это называется _шестнадцатеричный код (hex(adecimal) code)_ и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас. ![](screenshot_from_2014-11-03_17-40-49.png) @@ -66,7 +66,7 @@ _Каким должен быть ваш веб-сайт?_ обсудите пл Чтобы выбрать шрифт: -1. Перейдите на [Google Fonts](http://www.google.com/fonts) и прокрутите список вниз, пока не найдёте шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов. +1. Перейдите на [Google Fonts](https://www.google.com/fonts) и прокрутите список вниз, пока не найдёте шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов. 2. Щёлкните по кнопке "плюс" рядом со шрифтом, который вы хотите выбрать. 3. Щёлкните по кнопке "\* Family Selected" на панели в нижней части страницы. ("\*" зависит от того, сколько шрифтов вы выбрали) 4. В всплывающем окне вы можете увидеть и скопировать строки кода, которые предоставляет Google, чтобы сохранить их позже в вашем текстовом редакторе. diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md index 1016f27e2baf8c..ab763c0f140f64 100644 --- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md +++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md @@ -67,7 +67,7 @@ CDN - это географически распределённая сеть с ### Уменьшайте количество встроенных скриптов -Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования `document.write()` для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы [AJAX](/ru/docs/AJAX) для управления содержимым страницы, а не устаревшие подходы, которые основаны на `document.write()`. +Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования `document.write()` для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы [AJAX](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) для управления содержимым страницы, а не устаревшие подходы, которые основаны на `document.write()`. ### Используйте современный CSS и корректную разметку @@ -103,7 +103,7 @@ CDN - это географически распределённая сеть с ...
``` -Смотрите также: [CSS3 Multi-column Layout Spec](http://www.w3.org/TR/css3-multicol/) и [CSS3 Flexible Box Layout](http://www.w3.org/TR/css3-flexbox/) +Смотрите также: [CSS3 Multi-column Layout Spec](https://www.w3.org/TR/css3-multicol/) и [CSS3 Flexible Box Layout](https://www.w3.org/TR/css3-flexbox/) ### Сокращайте и сжимайте активы SVG @@ -171,7 +171,7 @@ SVG, создаваемый большинством графических пр ## Ссылки по теме - Книга: ["Speed Up Your Site" by Andy King](http://www.websiteoptimization.com/) -- Отличная и очень содержательная статья [Best Practices for Speeding Up Your Web Site](http://developer.yahoo.com/performance/rules.html) (Yahoo!) +- Отличная и очень содержательная статья [Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) (Yahoo!) - Инструменты для анализа и оптимизации производительности: [Google PageSpeed Tools](https://developers.google.com/speed/pagespeed/) ## Original Document Information diff --git a/files/ru/learn/html/howto/index.md b/files/ru/learn/html/howto/index.md index 312d23e86ff2eb..169594aab3473e 100644 --- a/files/ru/learn/html/howto/index.md +++ b/files/ru/learn/html/howto/index.md @@ -11,46 +11,46 @@ slug: Learn/HTML/Howto Основное применение HTML - это структура документа. Если вы новичок в HTML, вы должны начать с этого. -- [Как создать простой HTML документ](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document) -- [Как разделять веб-страницы на логические блоки](/ru/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections) -- [Как задавать структуру заголовков и параграфов](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs) +- [Как создать простой HTML документ](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document) +- [Как разделять веб-страницы на логические блоки](/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Как задавать структуру заголовков и параграфов](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#the_basics_headings_and_paragraphs) ### Основы организации гипертекста HTML специализируется на предоставлении семантической информации для документа, поэтому HTML отвечает на многие вопросы, которые могут у вас возникнуть о том, как лучше донести ваше сообщение в документе. -- [Как создать список элементов с помощью HTML](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists) -- [Как подчеркнуть или выделить содержание](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance) -- [Как подчеркнуть важность некоторого текста](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance) -- [Как отображать компьютерный код в HTML](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code) -- [Как комментировать (подписывать) изображения и видео](/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions) -- [Как помечать аббревиатуры и делать их понятными](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations) -- [Как добавлять цитаты на веб-страницы](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations) +- [Как создать список элементов с помощью HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists) +- [Как подчеркнуть или выделить содержание](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#emphasis_and_importance) +- [Как подчеркнуть важность некоторого текста](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#emphasis_and_importance) +- [Как отображать компьютерный код в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#representing_computer_code) +- [Как комментировать (подписывать) изображения и видео](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#annotating_images_with_figures_and_figure_captions) +- [Как помечать аббревиатуры и делать их понятными](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations) +- [Как добавлять цитаты на веб-страницы](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#quotations) - [Как определять термины в HTML](/ru/docs/Learn/HTML/Howto/Define_terms_with_HTML) ### Гиперссылки Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами: -- [Как создавать гиперссылки](/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) -- [Как создать "оглавление" HTML](/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu) +- [Как создавать гиперссылки](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Как создать "оглавление" HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#active_learning_creating_a_navigation_menu) ### Изображения и мультимедиа -- [Как добавить изображения на веб-страницу](/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage) -- [Как добавить видео на веб-страницу](/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) -- [Как добавить аудио на веб-страницу](/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [Как добавить изображения на веб-страницу](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#how_do_we_put_an_image_on_a_webpage) +- [Как добавить видео на веб-страницу](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) +- [Как добавить аудио на веб-страницу](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) ### Сценарии и стили HTML определяет лишь структуру документа. Для улучшения внешнего вида документа обычно используется CSS. Чтобы добавить странице интерактивности вы также можете написать сценарий на одном из скриптовых языков (например JavaScript). -- [Как использовать CSS внутри веб-страницы](/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML) +- [Как использовать CSS внутри веб-страницы](/ru/docs/Learn/CSS/First_steps/How_CSS_works#how_to_apply_your_css_to_your_html) - [Как использовать JavaScript внутри веб-страницы](/ru/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage) ### Встраиваемый контент -- [Как встроить одну веб-страницу внутрь другой](/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) +- [Как встроить одну веб-страницу внутрь другой](/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) - [Как добавлять Flash содержимое на веб-страницы](/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements) ## Необычные или продвинутые проблемы @@ -61,8 +61,8 @@ HTML определяет лишь структуру документа. Для Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвящённое руководство. Вот где вы должны начать: -- [Как создать простую Веб-форму](/ru/docs/Web/Guide/HTML/Forms/My_first_HTML_form) -- [Как организовать Веб форму](/ru/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form) +- [Как создать простую Веб-форму](/ru/docs/Learn/Forms/Your_first_form) +- [Как организовать Веб форму](/ru/docs/Learn/Forms/How_to_structure_a_web_form) ### Таблицы diff --git a/files/ru/learn/html/howto/use_data_attributes/index.md b/files/ru/learn/html/howto/use_data_attributes/index.md index cdaf0e9786919a..acdc719b629d74 100644 --- a/files/ru/learn/html/howto/use_data_attributes/index.md +++ b/files/ru/learn/html/howto/use_data_attributes/index.md @@ -5,7 +5,7 @@ slug: Learn/HTML/Howto/Use_data_attributes {{QuickLinksWithSubpages("/ru/docs/Learn/HTML/Howto")}} -[HTML5](/ru/docs/Web/Guide/HTML/HTML5) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. [`data-*` атрибуты](/ru/docs/Web/HTML/Global_attributes#data-*) позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}. +[HTML5](/ru/docs/Glossary/HTML5) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. [`data-*` атрибуты](/ru/docs/Web/HTML/Global_attributes#data-*) позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}. ## Синтаксис HTML diff --git a/files/ru/learn/html/index.md b/files/ru/learn/html/index.md index 94d318a747f87d..fd142726e0e398 100644 --- a/files/ru/learn/html/index.md +++ b/files/ru/learn/html/index.md @@ -9,20 +9,20 @@ slug: Learn/HTML ## Путь обучения (образовательная траектория) -В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела ["Введение в HTML"](/ru/docs/Web/Guide/HTML/Introduction). Затем вы можете перейти к изучению более продвинутых тем, таких как: +В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела ["Введение в HTML"](/ru/docs/Learn/HTML/Introduction_to_HTML). Затем вы можете перейти к изучению более продвинутых тем, таких как: - ["CSS (Каскадные таблицы стилей)"](/ru/docs/Learn/CSS), и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов). - ["JavaScript"](/ru/docs/Learn/JavaScript), и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появляться/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое). Прежде чем приступить к этой теме, вы должны иметь хотя бы базовое представление об использовании компьютеров вообще и уметь "пассивно" использовать Интернет (т.е. уметь просматривать веб-страницы, быть потребителем контента). У вас должна быть базовая рабочая среда, описанная в [разделе "Установка базового программного обеспечения"](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), а также вы должны понимать, как создавать файлы и управлять ими, что подробно описано в [разделе "Работа с файлами"](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — обе статьи являются частью нашего модуля для новичков - ["Начало работы с вебом"](/ru/docs/Learn/Getting_started_with_the_web). -Перед тем, как начать эту тему, рекомендуется пройтись по разделу ["Начало работы с вебом"](/ru/docs/Learn/Getting_started_with_the_web), однако это необязательно; многое из того, что описано в статье ["Основы HTML"](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics), также рассматривается и во ["Введении в HTML"](/ru/docs/Learn/HTML/Введение_в_HTML), причём даже более подробно. +Перед тем, как начать эту тему, рекомендуется пройтись по разделу ["Начало работы с вебом"](/ru/docs/Learn/Getting_started_with_the_web), однако это необязательно; многое из того, что описано в статье ["Основы HTML"](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics), также рассматривается и во ["Введении в HTML"](/ru/docs/Learn/HTML/Introduction_to_HTML), причём даже более подробно. ## Модули Данный раздел содержит модули, которые расположены в порядке, наиболее оптимальном для их изучения. Вам определённо следует начать с первого модуля. -- [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML) +- [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) - : Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы. - [Мультимедиа и встраивание](/ru/docs/Learn/HTML/Multimedia_and_embedding) - : В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц. @@ -30,7 +30,7 @@ slug: Learn/HTML - : Представление табличных данных на веб-странице в понятном, {{glossary("Accessibility", "доступном")}} образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме. -- [HTML Формы](/ru/docs/Learn/HTML/Forms) +- [HTML Формы](/ru/docs/Learn/Forms) - : Формы - очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнёте с создания частей форм на стороне клиента. ## Решение общих HTML задач diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.md b/files/ru/learn/html/introduction_to_html/debugging_html/index.md index 13760838482d12..d96fa83555005a 100644 --- a/files/ru/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.md @@ -69,7 +69,7 @@ HTML не страдает от синтаксических ошибок, по - Следующая часть нарушает правила вложенности: `strong strong emphasised? what is this?`. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше. - В атрибуте [`href`](/ru/docs/Web/HTML/Element/a#href) отсутствует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе. -5. Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на [Обзор инструментов разработки в браузерах](/ru/docs/Learn/Discover_browser_developer_tools). +5. Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на [Обзор инструментов разработки в браузерах](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools). 6. В DOM инспекторе вы можете увидеть как сгенерировалась новая разметка: ![The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.](html-inspector.png) 7. Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты): diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md index c49c65f05cecd9..8106d17fa29d28 100644 --- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -39,7 +39,7 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure > [!NOTE] > Люди с дальтонизмом составляют около [8% мирового населения](http://www.color-blindness.com/2006/04/28/colorblind-population/). Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было [285 миллионов таких людей](https://en.wikipedia.org/wiki/Visual_impairment), а общая численность населения составляла [около 7 миллиардов](https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg)). -В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их _функциональности_ — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд [последствий неиспользования правильной структуры элементов и семантики для правильной работы.](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure) +В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их _функциональности_ — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд [последствий неиспользования правильной структуры элементов и семантики для правильной работы.](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure) Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например: @@ -171,9 +171,9 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure - {{HTMLElement('main')}} предназначен для содержимого, _уникального для этой страницы_. Используйте `
` только _один_ раз на странице и размещайте прямо внутри {{HTMLElement('body')}}. В идеале он не должен быть вложен в другие элементы. - {{HTMLElement('article')}} окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге). -- {{HTMLElement('section')}} подобен `
`, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с [заголовка](/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy). Также обратите внимание, что в зависимости от контекста вы можете разбить `
` на несколько `
` или, наоборот, `
` на несколько `
`. +- {{HTMLElement('section')}} подобен `
`, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с [заголовка](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Также обратите внимание, что в зависимости от контекста вы можете разбить `
` на несколько `
` или, наоборот, `
` на несколько `
`. - {{HTMLElement('aside')}} содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.). -- {{HTMLElement('header')}} представляет собой группу вводного содержимого. Если он дочерний элемент {{HTMLElement('body')}}, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент {{HTMLElement('article')}} или {{HTMLElement('section')}}, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с [titles и headings](/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title)). +- {{HTMLElement('header')}} представляет собой группу вводного содержимого. Если он дочерний элемент {{HTMLElement('body')}}, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент {{HTMLElement('article')}} или {{HTMLElement('section')}}, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с [titles и headings](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_a_title)). - {{HTMLElement('nav')}} содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию. - {{HTMLElement('footer')}} представляет собой группу конечного контента для страницы. @@ -234,7 +234,7 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure

``` -Без элемента `
` абзац разместится в одну длинную линию (как было сказано ранее, [HTML игнорирует переносы строк](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML)), а с ним в коде — разметка будет выглядеть следующим образом: +Без элемента `
` абзац разместится в одну длинную линию (как было сказано ранее, [HTML игнорирует переносы строк](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html)), а с ним в коде — разметка будет выглядеть следующим образом: Жила-была девчушка Нелл, Любившая писать HTML: @@ -282,6 +282,6 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ## Дополнительные материалы -- [Using HTML sections and outlines](/ru/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5. +- [Using HTML sections and outlines](/ru/docs/Web/HTML/Element/Heading_Elements): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5. {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.md b/files/ru/learn/html/introduction_to_html/getting_started/index.md index 654872ad071efe..af482584de908f 100644 --- a/files/ru/learn/html/introduction_to_html/getting_started/index.md +++ b/files/ru/learn/html/introduction_to_html/getting_started/index.md @@ -455,7 +455,7 @@ textarea.onkeyup = function () { > ``` -Если вы хотите вставить кавычки того же типа, то вы должны использовать [объекты HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#entity_references_including_special_characters_in_html). Например, это работать не будет: +Если вы хотите вставить кавычки того же типа, то вы должны использовать [объекты HTML](#entity_references_including_special_characters_in_html). Например, это работать не будет: ```html example-bad A link to my example. @@ -522,8 +522,8 @@ textarea.onkeyup = function () { - Добавьте заголовок страницы сразу за открывающим тегом {{htmlelement("body")}}. Текст должен находиться между открывающим тегом `

` и закрывающим `

` . - Напишите в параграфе о чём-нибудь, что кажется вам интересным. - Выделите важные слова, обернув их в открывающий тег `` и закрывающий `` -- Добавьте ссылку на свой абзац так, как [объяснено ранее в статье](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#active_learning_adding_attributes_to_an_element). -- Добавьте изображение в свой документ под абзацем, как [объяснено ранее в статье](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#empty_elements). Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец! +- Добавьте ссылку на свой абзац так, как [объяснено ранее в статье](#active_learning_adding_attributes_to_an_element). +- Добавьте изображение в свой документ под абзацем, как [объяснено ранее в статье](#empty_elements). Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец! Если вы запутались, всегда можно запустить пример сначала кнопкой _Сбросить_. Сдаётесь — посмотрите ответ, нажав на _Показать решение_. @@ -726,6 +726,6 @@ textarea.onkeyup = function () { ## Смотрите также -- [Применение цвета к элементам HTML с помощью CSS](/ru/docs/Web/HTML/Applying_color) +- [Применение цвета к элементам HTML с помощью CSS](/ru/docs/Web/CSS/CSS_colors/Applying_color) {{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}} diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md index 6de7803ce03caa..df869d6e74a619 100644 --- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md +++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -44,7 +44,7 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ``` -Однако на больших страницах блок \ может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое \ с помощью [инструментов разработчика](/ru/docs/Learn/Discover_browser_developer_tools). Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём. +Однако на больших страницах блок \ может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое \ с помощью [инструментов разработчика](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools). Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём. ## Название страницы (title) @@ -145,7 +145,7 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ![Результат поиска в Google](updated_search_result__ru.jpg) > [!NOTE] -> Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через [Google Search Console](http://www.google.com/webmasters/tools/), чтобы пользователи могли сразу перейти к ним со страницы поиска. +> Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через [Google Search Console](https://www.google.com/webmasters/tools/), чтобы пользователи могли сразу перейти к ним со страницы поиска. > [!NOTE] > Многие типы `` больше не используются. Так, поисковые системы больше не используют данные из элемента ``, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске. diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index 33a59b6167327b..f5aabf816ceb36 100644 --- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -21,7 +21,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web - Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif) - Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.{{glossary("SVG")}} формат позволяет нам создавать векторную графику для использования в веб-документах. -Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG. +Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как [vector-versus-raster.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG. Различия становятся заметны, когда вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны "кирпичики". Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним. @@ -30,7 +30,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web ![Two star images zoomed in, one crisp and the other blurry](raster-vector-zoomed.png) > [!NOTE] -> Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) ! +> Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: [vector-versus-raster.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) ! Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе. @@ -122,7 +122,7 @@ background-size: contain; Подобно методу ``, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS. -Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то [данная статья укажет вам верное направление](/ru/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers). +Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то [данная статья укажет вам верное направление](/ru/docs/Web/SVG/Tutorial/Getting_Started#a_word_on_webservers). ### Как включить SVG в ваш HTML код @@ -137,7 +137,7 @@ background-size: contain; #### Плюсы - Вставка вашего SVG путём **SVG inline** позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки. -- Вы можете присваивать `class`-ы и `id` элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой [атрибут представления SVG](/ru/docs/Web/SVG/Attribute#Presentation_attributes) как свойство CSS. +- Вы можете присваивать `class`-ы и `id` элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой [атрибут представления SVG](/ru/docs/Web/SVG/Attribute#presentation_attributes) как свойство CSS. - **SVG inline** единственный метод, который позволяет вам использовать CSS-взаимодействия (как `:focus`) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей). - Вы можете разметить SVG как гиперссылку, обернув в элемент {{htmlelement("a")}}. @@ -319,7 +319,7 @@ textarea.onkeyup = function () { - [SVG tutorial](/ru/docs/Web/SVG/Tutorial/Getting_Started) on MDN - [Quick tips for responsive SVGs](http://thenewcode.com/744/Making-SVG-Responsive) - [Sara Soueidan's tutorial on responsive SVG images](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/) -- [Accessibility benefits of SVG](http://www.w3.org/TR/SVG-access/) +- [Accessibility benefits of SVG](https://www.w3.org/TR/SVG-access/) - [How to scale SVGs](https://css-tricks.com/scale-svg/) (it's not as simple as raster graphics!) {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md index 9da23c76475eeb..8f0b5bdefc636e 100644 --- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md +++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md @@ -5,7 +5,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_ {{learnsidebar}} -Цель этого теста навыков - оценить, поняли ли вы нашу статью [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML). +Цель этого теста навыков - оценить, поняли ли вы нашу статью [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). > [!NOTE] > Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/) для работы с задачами. diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md index 270e6ce58ce463..0cfd88a722005a 100644 --- a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md +++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -58,7 +58,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page Убедитесь, что вы использовали изображения, соответствующие ссылкам. > [!NOTE] -> Для проверки правильности работы `srcset`/`sizes` , вам нужно загрузить ваш сайт на сервер (используйте [Github pages](/ru/docs/Learn/Common_questions/Using_Github_pages) - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в [Responsive images: useful developer tools](/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools). +> Для проверки правильности работы `srcset`/`sizes` , вам нужно загрузить ваш сайт на сервер (используйте [Github pages](/ru/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages) - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в [Responsive images: useful developer tools](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#useful_developer_tools). ### Искусственно изменённая красная панда diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index 64ac6310124f37..2a2d0aaf0f5d05 100644 --- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -219,7 +219,7 @@ textarea.onkeyup = function () { Помимо безопасности, вы также должны знать об интеллектуальной собственности. Большинство контента находится под защитой авторских прав, даже тот, от которого вы не могли ожидать (например, большинство картинок на [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page)). Никогда не выводите контент на свою страницу, если он вам не принадлежит или если нет однозначного письменного разрешения от правообладателя. Наказания за нарушения авторских прав строги. И, повторимся, вы никогда не можете быть слишком осторожными. -Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на [licensed under CC-BY-SA](/ru/docs/MDN/About#Copyrights_and_licenses). Это означает, что вы [должны относиться к нам с уважением](https://wiki.creativecommons.org/wiki/Best_practices_for_attribution), когда цитируете наш контент, даже если внесли в него существенные изменения. +Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на [licensed under CC-BY-SA](/ru/docs/MDN/Writing_guidelines#copyrights_and_licenses). Это означает, что вы [должны относиться к нам с уважением](https://wiki.creativecommons.org/wiki/Best_practices_for_attribution), когда цитируете наш контент, даже если внесли в него существенные изменения. #### Используйте HTTPS @@ -230,7 +230,7 @@ textarea.onkeyup = function () { Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть [Let's Encrypt](https://letsencrypt.org/), что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS _во что бы то ни стало_ вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через \