recursal/MDN huggingface dataset:
Глоссарий MDN Web Docs: определения веб-терминов
================================================

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

Термины глоссария перечислены в боковой панели слева.

**Примечание:** Глоссарий развивается непрерывно. Каждый может внести свой вклад в его развитие добавляя новые страницы или улучшая уже существующие.
Проект MDN
==========

**Сеть Разработчиков Mozilla** (Mozilla Developer Network или MDN) — это вики, в которой мы описываем Открытый Интернет, технологии Mozilla, Firefox OS и другие темы, посвящённые веб-разработке. Любой желающий может добавить или отредактировать содержимое вики. Совсем не обязательно быть программистом или знать в совершенстве описываемые технологии; есть множество разных задач, не требующих особых знаний или умений, от простых (чтение с подтверждением о соответствии материала и исправление опечаток) до сложных (написание документации к API).

Цель проекта MDN — задокументировать Открытый Интернет, технологии и проекты Mozilla. Мы приглашаем вас помочь нам!

Нам требуется ваша помощь! Это просто. Вам не нужно просить разрешения или бояться совершить ошибку. C другой стороны, вы можете присоединиться к сообществу MDN; мы здесь, чтобы помочь вам! Приведённая ниже информация поможет вам начать.

* Быстрый старт для новичков
 Вы впервые столкнулись с MDN и желаете узнать, как сделать её ещё лучше? Начните отсюда!
* Я продвинутый пользователь
 Если вы уже комфортно чувствуете себя на MDN, получите доступ к нашему полному и глубокому руководству для участников сообщества.
* Расскажите другим о Mozilla
 Если вам нравится MDN, помогите нам популяризовать его! Получите инструменты, руководства, арт для продвижения и развития MDN.
Mozilla
=======

Узнайте как скачать и выполнить сборку кода проектов Mozilla. А также полезные статьи о том как работает этот код, и как собирать дополнения для приложений Mozlla, и т.д.

FirefoxFirefox - это популярный веб-браузер от Mozilla, доступный на многих платформах, включая Windows, Mac OS X и Linux, а также на мобильных устройствах под управлением Android и iOS. Firefox широко поддерживает самые современные веб-технологии и также имеет удобные встроенные инструменты для разработки веб-приложений, Firefox - это отличный выбор, как для обыкновенных пользователей, так и для веб-разработчиков.

ДополненияДополнения добавляют новые функциональные возможности в Gecko-приложения, такие, как Firefox, SeaMonkey и Thunderbird. Есть два основных типа дополнений: расширения, которые добавляют новые функции в приложение, и темы, изменяющие пользовательский интерфейс приложения.
Введение в CSS
==============

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

Необходимые условия
-------------------

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

1. Базовое знакомство с использованием компьютеров и пассивным использованием Интернета (то есть, просматривая его, потребляя контент).
2. Базовая рабочая среда, описанная в разделе Установка базового программного обеспечения, и понимание того, как создавать файлы и управлять ими, подробно описано в разделе Работа с файлами.
3. Основное знакомство с HTML, как описано в модуле Введение в HTML.

**Примечание:** Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программах кодирования, таких как JSBin или Thimble.

Руководства
-----------

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

Что такое CSS?

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

Начало работы с CSS

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

Как структурирован CSS

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

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

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

Использование ваших новых знаний

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

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

Intermediate Web Literacy 1: Intro to CSS

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

Следующие ссылки указывают на решения общих повседневных проблем, вам придётся решать их с помощью CSS.

Примеры и использование
-----------------------

### Основы

* Как применить CSS к HTML
* Как использовать пробелы в CSS
* Как писать комментарии в CSS
* Как выбрать элементы через имя элемента, класс или ID
* Как выбрать элементы через имя атрибута и содержания
* Как использовать псевдоклассы
* Как использовать псевдо-элементы
* Как применить несколько селекторов к тому же правилу
* Как определить цвета в CSS
* Как отлаживать CSS в браузере
### CSS и текст

* Как стилизовать текст
* How to customize a list of elements
* Как стилизовать ссылки
* How to add shadows to text
### Блоки и разметка

* How to size CSS boxes
* How to control overflowing content
* How to control the part of a CSS box that the background is drawn under
* How do I define inline, block, and inline-block?
* How to create fancy boxes (en-US) (also see the Styling boxes module, generally).
* How to use `background-clip` to control how much of the box your background image covers.
* How to change the box model completely using `box-sizing`
* How to control backgrounds
* How to control borders
* How to style an HTML table
* How to add shadows to boxes
Необычное или передовые технологии
----------------------------------

Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.

### Общие

* How to calculate specificity of a CSS selector
* How to control inheritance in CSS
### Дополнительные эффекты

* How to use filters in CSS
* How to use blend modes in CSS
### Разметка

* Using CSS flexible boxes (en-US)
* Using CSS multi-column layouts
* Using CSS generated content (en-US)
Смотрите также
--------------

CSS FAQ — A collection of smaller bits of information, covering a variety of topics from debugging to selector usage.
Стилизация текста
=================

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

Необходимые условия
-------------------

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

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

Руководство
-----------

Данный модуль состоит из следующих далее статей, которые дадут вам всё необходимое для оформления текстового HTML-контента.

Основы стилизации текста и шрифта

В этой статье мы детально изучим стилизацию текста и шрифтов, включая параметры weight, family, style, font shorthand, text alignment и прочие эффекты, а также line и letter spacing.

Стилизация списков

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


Стилизация ссылок

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

Веб-шрифты

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

Проверка
--------

Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведённых руководствах.

Вёрстка домашней страницы муниципальной школы

В этом задании мы проверим ваше понимание стилизации текста, заставив вас оформить текст для домашней страницы общеобразовательной школы.
Проверьте ваши навыки: Каскад
=============================

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

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

Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел Оценка или дальнейшая помощь внизу этой страницы.

Задание 1
---------

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

![Barely visible yellow links on a white background.](/ru/docs/Learn/CSS/Building_blocks/Cascade_tasks/mdn-cascade.png)

Посмотрите, сможете ли вы повторить эту картинку в примере ниже.

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

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

Вы можете упражняться на этих примерах в интерактивных редакторах, упомянутых выше.

Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:

1. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использовать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
2. Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": MDN Discourse forum Learning category. Ваше сообщение должно включать:
    * Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
    * Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.
    * Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
    * Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.
Проверьте свои навыки: позиционирование
=======================================

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

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

Если вы застрянете, попросите нас о помощи — см. раздел Оценка и дальнейшая помощь в конце страницы

Позиционирование Раз
--------------------

В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.

![The green box is at the top right of a container with a grey border.](/ru/docs/Learn/CSS/CSS_layout/Position_skills/position-task1.png)

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

В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом?

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

Позиционирование Два
--------------------

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

![The content is scrolled but the sidebar has stayed in place.](/ru/docs/Learn/CSS/CSS_layout/Position_skills/position-task2.png)

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

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

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

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать:
    * Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".
    * Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
    * Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
    * Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
Фундаментальное понимание раскладки
===================================

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

| Необходимое условие: | Прежде чем приступать к этой аттестации, вы должны были уже проработать все статьи в этом модуле. |
| --- | --- |
| Цель: | Проверить понимание фундаментальных навыков раскладки, освещаемых в этом модуле. |

Резюме проекта
--------------

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

![](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension/layout-task-complete.png)

### Базовые настройки

Вы можете скачать HTML, CSS, и набор из шести изображений тут.

Сохраните HTML документ и css стили внутри директории на вашем компьютере и добавьте изображения внутрь папки с именем `images`. Открыв `index.html` файл в браузере, вы должны получить страницу с базовой стилизацией, но без раскладки, что должно выглядеть как на изображении ниже.

Эта отправная точка и всё содержимое отображается браузером в нормальном потоке.

![](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension/layout-task-start.png)

### Ваши задачи

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

1. Отобразить пункты навигации в строку, с одинаковым количеством пространства между элементами.
2. Панель навигации должна прокручиваться вместе с содержимым страницы и закрепляться вверху видимой области документа в рамках экрана.
3. Изображение, которое находится внутри статьи, должно обтекаться текстом вокруг него.
4. `<article>` и `<aside>` элементы должны отображаться как двухколоночная раскладка. Колонки должны иметь гибкий размер, если окно браузера уменьшится, колонки должны стать более узкими.
5. Фотографии должны отображаться как двухколоночная сетка с отступом в 1px между изображениями.

Вам нет необходимости изменять HTML для создания этой раскладки и техник, которые вы должны использовать:

* Позиционирование
* Раскладка на Float
* Раскладка на Flexbox
* Раскладка на CSS Grid

Есть множество способов, как выполнить некоторые из этих задач и часто не существует одного правильного или неправильного способа это сделать. Попробуйте несколько разных способов и увидите, какой работает лучше. Делайте заметки о ваших экспериментах и вы всегда сможете обсудить ваш способ в отдельной дискуссии для этого задания или на #mdn IRC канале.

Оценка работы
-------------

Если вы проходите эту аттестацию как часть организованного курса, вы должны быть в состоянии дать свою работу вашему учителю/наставнику для оценки. Если вы занимаетесь самообучением, тогда вы легко можете получить руководство по оценке работы, задавая вопросы в отдельной дискуссии для этого задания или на #mdn IRC канале в Mozilla IRC. Сначала попробуйте выполнить упражнение — нет никаких причин для жульничества!
Первые шаги в программировании веб-сайтов на стороне сервера
============================================================

В этом модуле, посвящённом программированию на стороне сервера, мы ответим на несколько фундаментальных вопросов о программировании серверной части: «что это такое?», «чем оно отличается от программирования клиентской части?» и «почему оно так полезно?». Затем последует обзор некоторых самых популярных веб-фреймворков для серверной части и руководство по выбору наиболее подходящего фреймворка для создания вашего первого сайта. Наконец, мы завершим этот модуль вводной статьёй о безопасности веб-сервера.

Прежде чем начать
-----------------

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

Вам нужно понимать "как работает веб". Мы рекомендуем вам сперва прочесть следующие темы:

* Что такое веб-сервер
* Какое программное обеспечение мне нужно для создания сайта?
* Как загружать файлы на веб-сервер?

С этими базовыми знаниями вы будете готовы работать с модулями этого раздела.

Руководства
-----------

Введение в серверную часть

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

Обзор Клиент-Сервера

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

Фреймворки серверной части

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

Безопасность веб-сайта

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

Аттестация
----------

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