switch to new structure

modules/10-basics-html/10-html-markup/ru/EXERCISE.md

@@ -0,0 +1,5 @@
+Скопируйте HTML и вставьте его в редактор на этой странице
+
+```html
+<h1>Hello, World!</h1>
+```

modules/10-basics-html/10-html-markup/ru/README.md

@@ -0,0 +1,23 @@
+Каждый день мы смотрим на десятки интернет-страниц, читаем на них тексты, которые выводятся, как будто из журналов. Эти страницы представляют из себя гипертекст — систему интернет-страниц, по которым можно путешествовать с помощью ссылок. Для реализации этой системы существует язык HTML.
+
+HTML (HyperText Markup Language) — язык для разметки гипертекста. По своим функциям, HTML —  набор правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. Язык появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.
+
+Даже эта страница является текстом, который описан с помощью HTML и обработан браузером. Технологии шагнули далеко вперёд, но концепция использования HTML для разметки текста остаётся неизменной и спустя много лет.
+
+Вот пример HTML разметки:
+
+```html
+<section>
+  <h2>Code Basics</h2>
+  <p>
+    Code Basics — бесплатные практические уроки по программированию для тех,
+    кто начинает с нуля.
+  </p>
+  <p>
+    Если вы совсем новичок и хотите научиться основам — переменным,
+    строкам, циклам, функциям и т.д., то Code Basics вам подойдёт.
+  </p>
+</section>
+```
+
+Не пугайтесь такого обилия непонятных слов и знаков — к концу курса вы будете понимать работу приведённой выше разметки, а также научитесь использовать разметку на своих страницах. Обратите внимание, что вся суть в разметке выше — это текст. Остальное — вспомогательные элементы для того, чтобы вывести текст там, где было задумано дизайнерами и/или разработчиками.

modules/10-basics-html/10-html-markup/ru/data.yml

@@ -0,0 +1 @@
+name: HTML разметка

modules/10-basics-html/20-tags/ru/EXERCISE.md

@@ -0,0 +1 @@
+Оберните в тег `<p>` фразу _The quick brown fox jumps over the lazy dog_ и вставьте в редактор

modules/10-basics-html/20-tags/ru/README.md

@@ -0,0 +1,33 @@
+
+Для определения браузером типа элемента, который нужно вывести на страницу, в HTML существуют специальные конструкции — теги. С помощью тегов можно создать параграф, заголовок, секцию текста, а также быстро менять их.
+
+Одним из основных тегов является параграф. Он отделяет участки текста друг от друга, что позволяет пользователям комфортнее читать информацию на странице.
+
+В HTML параграфы обозначаются специальной конструкцией `<p></p>` внутри которой вставляется нужный текст. Это делается между `<p>` и `</p>`. Такие теги называются _парными_, так как у них есть открывающая и закрывающая часть. Помимо _парных_ тегов существуют _непарные_, у них нет закрывающей части, так как внутрь ничего не помещается.
+
+```html
+<p>
+  Хекслет — практические курсы по программированию.
+  Мы помогаем новичкам стать профессиональными программистами,
+  а опытным разработчикам получать новые знания и расти профессионально.
+</p>
+```
+
+Таких параграфов на странице может быть несколько — это не уникальный элемент.
+
+```html
+<p>Хекслет — практические курсы по программированию.</p>
+<p>
+  Мы помогаем новичкам стать профессиональными программистами,
+  а опытным разработчикам получать новые знания и расти профессионально.
+</p>
+```
+
+Забегая немного вперёд, хочется отметить, что браузеры, по умолчанию, выводят многие теги с заранее определёнными стилями. Например, параграфы имеют отступы снизу, чтобы визуально отделить их друг от друга. Прошлый пример в браузере выглядит так:
+
+<div class="hexlet-basics-example my-3">
+  <p>Хекслет — практические курсы по программированию.</p>
+  <p class="m-0">Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
+</div>
+
+Используя CSS можно менять эти стили и добавлять новые. Изучению этого языка посвящён отдельный курс на сайте.

modules/10-basics-html/20-tags/ru/data.yml

@@ -0,0 +1 @@
+name: Теги

modules/10-basics-html/30-text-in-html/ru/EXERCISE.md

@@ -0,0 +1,9 @@
+Сверстайте текст
+
+<div class="hexlet-basics-example my-3 bg-light font-monospace">
+  <p>Карьерный портал «Мой круг» изучил рынок IT-образования и выяснил, в каких онлайн-школах эффективно учат программированию. В итоговом рейтинге Хекслет занял второе место.</p>
+
+  <p class="m-0">«Мой круг» опросил 3500 IT-специалистов и составил рейтинг онлайн-школ для программистов. В опросе приняли участие пользователи «Моего круга» и «Хабра», которые учились в онлайн-университетах. В финальной таблице «Хекслет» занял второе место.</p>
+</div>
+
+Каждый абзац должен находиться внутри отдельного тега

modules/10-basics-html/30-text-in-html/ru/README.md

@@ -0,0 +1,40 @@
+
+Внутри браузера или другой программы, которая может обрабатывать HTML, текст выводится на основе указанных тегов. Без них браузер не поймёт, как правильно вывести текст.
+
+Посмотрим на пример текста и попробуем вывести его используя разметку тегами и без этого.
+
+Текст:
+
+<div class="hexlet-basics-example my-3 bg-light font-monospace">
+  <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
+
+  <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
+
+  <p class="m-0">Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
+</div>
+
+Если вставить текст на страницу без использования тегов, то получим такой результат:
+
+<div class="hexlet-basics-example my-3">
+  Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода. При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии. Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.
+</div>
+
+Это не тот результат, который ожидался — строки слиплись и превратились в одну нечитаемую строку. Для того, чтобы текст выглядел так, как задумано, его необходимо обернуть в теги `<p>`:
+
+```html
+<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
+
+<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
+
+<p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
+```
+
+<div class="hexlet-basics-example my-3">
+  <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
+
+  <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
+
+  <p class="m-0">Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
+</div>
+
+Пример иллюстрирует, что оформленный текст в офисном редакторе при открытии в браузере станет одной сплошной строкой, поэтому информация размечается специальными тегами. В процессе прохождения курса рассмотрим теги для создания таблиц, списков, ссылок и логических секций страницы. В этом же уроке мы подробнее рассмотрели параграфы и важность разметки для правильного вывода информации на странице

modules/10-basics-html/30-text-in-html/ru/data.yml

@@ -0,0 +1 @@
+name: Текст в HTML

modules/10-basics-html/40-nested-tag/ru/EXERCISE.md

@@ -0,0 +1 @@
+Создайте маркированный список из трёх элементов. Этот тип списка вы изучили в уроке

modules/10-basics-html/40-nested-tag/ru/README.md

@@ -0,0 +1,47 @@
+
+Важной концепцией HTML является вложенность тегов. Внутрь HTML-тега можно помещать не только текст, как было ранее, но и другие теги. Это позволяет создавать сложную вёрстку, в которой области отделены друг от друга: меню от шапки сайта, рекламный блок от основного контента и так далее.
+
+Некоторые элементы в HTML требуют вложенности одних тегов в другие. Например, списки:
+
+```html
+<ul>
+  <li>Первый элемент списка</li>
+  <li>Второй элемент списка</li>
+</ul>
+```
+
+<div class="hexlet-basics-example my-3">
+  <ul class="m-0">
+    <li>Первый элемент списка</li>
+    <li>Второй элемент списка</li>
+  </ul>
+</div>
+
+Для определения списка используется тег `<ul>`, который указывает, что это _маркированный_ список. Внутри располагаются теги `<li>`, определяющие элементы нашего списка.
+
+Такие вложенности похожи на деревья, где есть вершина дерева (тег `<ul>`) и листья (теги `<li>`)
+
+```
+|──ul
+| |──li
+| |──li
+```
+
+---
+
+**Интересно:** тег, внутри которого вложены другие теги, ещё называют _обёрткой_ или _враппером/wrapper_
+
+---
+
+Дерево может разрастаться и дальше. В уроках про списки будет показано, что внутри элементов списка могут располагаться другие списки и этот процесс почти бесконечен.
+
+Но бывают и исключения. В HTML нельзя вкладывать параграфы в параграфы. Пример ниже будет неправильным:
+
+```html
+<p>Параграф
+  <p>А вот ещё параграф внутри параграфа</p>.
+  Параграф недоволен таким соседством
+</p>
+```
+
+В этом уроке мы познакомились с концепцией вложенности тегов в HTML и рассмотрели её на примере создания маркированных списков. В процессе прохождения курса вы изучите множество ситуаций, когда вложенность является лучшим решением, а так же узнаете о тегах, которые нельзя вкладывать друг в друга

modules/10-basics-html/40-nested-tag/ru/data.yml

@@ -0,0 +1 @@
+name: Вложенность тегов

modules/10-basics-html/50-attributes/ru/EXERCISE.md

@@ -0,0 +1 @@
+Создайте параграф с произвольным текстом и всплывающей подсказкой. Добавьте к нему класс `hexlet`