Add languages Russian, Arabic, Chinese, Portuguese (#18305)

This commit is contained in:
Beau Carnes
2018-10-10 18:03:03 -04:00
committed by mrugesh mohapatra
parent 09d3eca712
commit 2ca3a2093f
5517 changed files with 371466 additions and 5 deletions

View File

@@ -0,0 +1,77 @@
---
id: bad87fee1348bd9aedd08830
title: Add a Submit Button to a Form
challengeType: 0
guideUrl: 'https://russian.freecodecamp.org/guide/certificates/add-a-submit-button-to-a-form'
videoUrl: ''
localeTitle: Добавить кнопку отправки в форму
---
## Description
<section id="description"> Давайте добавим кнопку <code>submit</code> в вашу форму. Нажатие этой кнопки отправит данные из вашей формы в URL-адрес, указанный вами с помощью атрибута <code>action</code> формы. Вот пример кнопки отправки: <code>&lt;button type=&quot;submit&quot;&gt;this button submits the form&lt;/button&gt;</code> </section>
## Instructions
<section id="instructions"> Добавьте кнопку в качестве последнего элемента вашего элемента <code>form</code> с типом <code>submit</code> и «Отправить» в качестве текста. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: У вашей формы должна быть кнопка внутри.
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
- text: 'Кнопка отправки должна иметь <code>type</code> атрибута, установленный для <code>submit</code> .'
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
- text: Кнопка отправки должна содержать только текст «Отправить».
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
- text: 'Убедитесь, что ваш элемент <code>button</code> имеет закрывающий тег.'
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,60 @@
---
id: bad87fee1348bd9aedf08812
title: Add Images to Your Website
challengeType: 0
guideUrl: 'https://russian.freecodecamp.org/guide/certificates/add-images-to-your-website'
videoUrl: ''
localeTitle: Добавить изображения на свой сайт
---
## Description
<section id="description"> Вы можете добавлять изображения на свой сайт с помощью элемента <code>img</code> и указывать URL-адрес определенного изображения, используя атрибут <code>src</code> . Примером этого может быть: <code>&lt;img src=&quot;https://www.your-image-source.com/your-image.jpg&quot;&gt;</code> Обратите внимание, что элементы <code>img</code> самозакрываются. Все элементы <code>img</code> <strong>должны</strong> иметь атрибут <code>alt</code> . Текст внутри атрибута <code>alt</code> используется для чтения с экрана для улучшения доступности и отображается, если изображение не загружается. Примечание. Если изображение является чисто декоративным, использование чистого атрибута <code>alt</code> является наилучшей практикой. В идеале атрибут <code>alt</code> не должен содержать специальных символов, если это не требуется. Давайте добавим атрибут <code>alt</code> к нашему примеру <code>img</code> выше: <code>&lt;img src=&quot;https://www.your-image-source.com/your-image.jpg&quot; alt=&quot;Author standing on a beach with two thumbs up.&quot;&gt;</code> </section>
## Instructions
<section id="instructions"> Попробуем добавить изображение на наш сайт: вставьте тег <code>img</code> перед элементом <code>h2</code> . Теперь установите атрибут <code>src</code> так, чтобы он указывал на этот url: <code>https://bit.ly/fcc-relaxing-cat</code> Наконец, не забудьте дать вашему изображению текст <code>alt</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Ваша страница должна иметь элемент изображения.
testString: 'assert($("img").length > 0, "Your page should have an image element.");'
- text: У вашего изображения должен быть атрибут <code>src</code> который указывает на изображение котенка.
testString: 'assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), "Your image should have a <code>src</code> attribute that points to the kitten image.");'
- text: Элемент изображения <strong>должен</strong> иметь атрибут <code>alt</code> .
testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element <strong>must</strong> have an <code>alt</code> attribute.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,73 @@
---
id: bad87fee1348bd9aedf08830
title: Add Placeholder Text to a Text Field
challengeType: 0
guideUrl: 'https://russian.freecodecamp.org/guide/certificates/add-placeholder-text-to-a-text-field'
videoUrl: ''
localeTitle: Добавить текст заполнителя в текстовое поле
---
## Description
<section id="description"> Текст-заполнитель - это то, что отображается в вашем элементе <code>input</code> до того, как ваш пользователь ввел что-либо. Вы можете создать текст заполнителя следующим образом: <code>&lt;input type=&quot;text&quot; placeholder=&quot;this is placeholder text&quot;&gt;</code> </section>
## Instructions
<section id="instructions"> Задайте значение <code>placeholder</code> вашего <code>input</code> текста «URL-адрес кота». </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Добавьте атрибут <code>placeholder</code> в существующий элемент <code>input</code> текста.
testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
- text: Установите для атрибута placeholder значение «URL-адрес кота».
testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
- text: Готовый элемент <code>input</code> должен иметь действительный синтаксис.
testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|".*?"|[\^"">\s]+))?)+\s*|\s*)\/?>/gi), "The finished <code>input</code> element should have valid syntax.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<input type="text">
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,78 @@
---
id: bad87fee1348bd9aedd08835
title: Check Radio Buttons and Checkboxes by Default
challengeType: 0
videoUrl: ''
localeTitle: Проверьте радио кнопки и флажки по умолчанию
---
## Description
<section id="description"> Вы можете установить флажок или переключатель для проверки по умолчанию с помощью атрибута <code>checked</code> . Для этого просто добавьте слово «проверено» во внутреннюю часть элемента ввода. Например: <code>&lt;input type=&quot;radio&quot; name=&quot;test-name&quot; checked&gt;</code> </section>
## Instructions
<section id="instructions"> Установите первый из ваших <code>radio buttons</code> и первый из ваших <code>checkboxes</code> чтобы оба были <code>checkboxes</code> по умолчанию. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Ваш первый переключатель в вашей форме должен быть проверен по умолчанию.
testString: 'assert($("input[type="radio"]").prop("checked"), "Your first radio button on your form should be checked by default.");'
- text: Ваш первый флажок в вашей форме должен быть проверен по умолчанию.
testString: 'assert($("input[type="checkbox"]").prop("checked"), "Your first checkbox on your form should be checked by default.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,63 @@
---
id: bad87fee1348bd9aedf08804
title: Comment out HTML
challengeType: 0
videoUrl: ''
localeTitle: Комментарий HTML
---
## Description
<section id="description"> Помните, что для того, чтобы начать комментарий, вам нужно использовать <code>&lt;!--</code> и для завершения комментария, вам нужно использовать <code>--&gt;</code> Здесь вам нужно будет закончить комментарий до того, как начнется ваш элемент <code>h2</code> . </section>
## Instructions
<section id="instructions"> Комментируйте свой элемент <code>h1</code> и ваш элемент <code>p</code> , но не ваш элемент <code>h2</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Прокомментируйте свой элемент <code>h1</code> чтобы он не был виден на вашей странице.
testString: 'assert(($("h1").length === 0), "Comment out your <code>h1</code> element so that it is not visible on your page.");'
- text: 'Оставьте свой <code>h2</code> элемент раскомментированным, чтобы он был виден на вашей странице.'
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");'
- text: Прокомментируйте свой элемент <code>p</code> чтобы он не был виден на вашей странице.
testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");'
- text: Не забудьте закрыть каждый из ваших комментариев с помощью <code>--&gt;</code> .
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--&#62;</code>.");'
- text: Не изменяйте порядок <code>h1</code> <code>h2</code> или <code>p</code> в коде.
testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,63 @@
---
id: bad87fee1348bd9aedf08827
title: Create a Bulleted Unordered List
challengeType: 0
videoUrl: ''
localeTitle: Создать маркированный неупорядоченный список
---
## Description
<section id="description"> HTML имеет специальный элемент для создания <code>unordered lists</code> или списков стилей в стиле пули. Неупорядоченные списки начинаются с элемента открытия <code>&lt;ul&gt;</code> , за которым следует любое количество элементов <code>&lt;li&gt;</code> . Наконец, неупорядоченные списки закрываются с помощью <code>&lt;/ul&gt;</code> Например: <blockquote> &lt;UL&gt; <br> &lt;Li&gt; молоко &lt;/ li&gt; <br> &lt;Li&gt; сыр &lt;/ li&gt; <br> &lt;/ UL&gt; </blockquote> создаст список стиля пули «молоко» и «сыр». </section>
## Instructions
<section id="instructions"> Удалите последние два элемента <code>p</code> и создайте неупорядоченный список из трех вещей, которые любят кошки в нижней части страницы. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Создайте элемент <code>ul</code> .
testString: 'assert($("ul").length > 0, "Create a <code>ul</code> element.");'
- text: У вас должно быть три элемента <code>li</code> в вашем элементе <code>ul</code> .
testString: 'assert($("ul li").length > 2, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
- text: 'Убедитесь, что ваш элемент <code>ul</code> имеет закрывающий тег.'
testString: 'assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length, "Make sure your <code>ul</code> element has a closing tag.");'
- text: 'Убедитесь, что ваши элементы <code>li</code> закрывают теги.'
testString: 'assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length, "Make sure your <code>li</code> elements have closing tags.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,72 @@
---
id: bad87fee1348bd9aede08830
title: Create a Form Element
challengeType: 0
videoUrl: ''
localeTitle: Создание элемента формы
---
## Description
<section id="description"> Вы можете создавать веб-формы, которые фактически отправляют данные на сервер, используя не что иное, как чистый HTML. Вы можете сделать это, указав действие в элементе <code>form</code> . Например: <code>&lt;form action=&quot;/url-where-you-want-to-submit-form-data&quot;&gt;&lt;/form&gt;</code> </section>
## Instructions
<section id="instructions"> Заглушите свое текстовое поле внутри элемента <code>form</code> и добавьте атрибут <code>action=&quot;/submit-cat-photo&quot;</code> в элемент формы. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Вставьте элемент ввода текста в элемент <code>form</code> .
testString: 'assert($("form") && $("form").children("input") && $("form").children("input").length > 0, "Nest your text input element within a <code>form</code> element.");'
- text: 'Убедитесь, что ваша <code>form</code> имеет атрибут <code>action</code> который установлен в <code>/submit-cat-photo</code>'
testString: 'assert($("form").attr("action") === "/submit-cat-photo", "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>");'
- text: 'Убедитесь, что ваш элемент <code>form</code> имеет хорошо сформированные открытые и закрытые метки.'
testString: 'assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length, "Make sure your <code>form</code> element has well-formed open and close tags.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<input type="text" placeholder="cat photo URL">
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,79 @@
---
id: bad87fee1348bd9aedf08835
title: Create a Set of Checkboxes
challengeType: 0
videoUrl: ''
localeTitle: Создать набор флажков
---
## Description
<section id="description"> Формы обычно используют <code>checkboxes</code> для вопросов, которые могут иметь более одного ответа. Флажки - это тип <code>input</code> Каждый из ваших флажков может быть вложен в свой собственный элемент <code>label</code> . Обернув элемент <code>input</code> внутри элемента <code>label</code> он автоматически свяжет флажок с элементом метки, окружающим его. Все связанные с ним флажки должны иметь одинаковый атрибут <code>name</code> . Считается , что лучше практика явно определить отношения между CheckBox <code>input</code> и соответствующим <code>label</code> , установив <code>for</code> атрибута на <code>label</code> элемента в соответствии с <code>id</code> атрибута соответствующего <code>input</code> элемента. Вот пример флажка: <code>&lt;label for=&quot;loving&quot;&gt;&lt;input id=&quot;loving&quot; type=&quot;checkbox&quot; name=&quot;personality&quot;&gt; Loving&lt;/label&gt;</code> </section>
## Instructions
<section id="instructions"> Добавьте в свою форму набор из трех флажков. Каждый флажок должен быть вложен в свой собственный элемент <code>label</code> . Все три должны разделить <code>name</code> атрибута <code>personality</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: На вашей странице должно быть три элемента флажка.
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
- text: Каждый из трех элементов флажка должен быть вложен в свой собственный элемент <code>label</code> .
testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
- text: 'Убедитесь, что каждый из ваших элементов <code>label</code> имеет закрывающий тег.'
testString: 'assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, "Make sure each of your <code>label</code> elements has a closing tag.");'
- text: Дайте Флажки на <code>name</code> атрибута <code>personality</code> .
testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,83 @@
---
id: bad87fee1348bd9aedf08834
title: Create a Set of Radio Buttons
challengeType: 0
videoUrl: ''
localeTitle: Создание набора кнопок радиосвязи
---
## Description
<section id="description"> Вы можете использовать <code>radio buttons</code> для вопросов, в которых вы хотите, чтобы пользователь дал вам один ответ из нескольких вариантов. Кнопки радио - это тип <code>input</code> . Каждый из ваших переключателей может быть вложен в свой собственный элемент <code>label</code> . Обернув элемент <code>input</code> внутри элемента <code>label</code> он автоматически свяжет входной переключатель с окружающим его элементом метки. Все связанные радиокнопки должны иметь одинаковый атрибут <code>name</code> для создания группы переключателей. Создавая группу радиостанций, при выборе любого одного переключателя автоматически отменяется выбор других кнопок в пределах одной группы, гарантируя пользователю только один ответ. Вот пример переключателя: <blockquote> &lt;Метка&gt; <br> &lt;input type = &quot;radio&quot; name = &quot;indoor-outdoor&quot;&gt; Крытый <br> &lt;/ Метка&gt; </blockquote> Рекомендуется использовать атрибут <code>for</code> атрибута элемента <code>label</code> со значением, которое соответствует значению атрибута <code>id</code> <code>input</code> элемента. Это позволяет вспомогательным технологиям создавать взаимосвязанные отношения между меткой и элементом <code>input</code> . Например: <blockquote> &lt;label for = &quot;indoor&quot;&gt; <br> &lt;input id = &quot;indoor&quot; type = &quot;radio&quot; name = &quot;indoor-outdoor&quot;&gt; Крытый <br> &lt;/ Метка&gt; </blockquote></section>
## Instructions
<section id="instructions"> Добавьте пару радиокнопок в вашу форму, каждая из которых вложена в свой собственный элемент метки. Нужно иметь возможность <code>indoor</code> а у другого - возможность <code>outdoor</code> . Оба должны совместно использовать атрибут <code>name</code> <code>indoor-outdoor</code> чтобы создать группу радиостанций. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: На вашей странице должно быть два элемента переключателя.
testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
- text: Дайте ваше радио кнопки на <code>name</code> атрибут <code>indoor-outdoor</code> .
testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
- text: Каждый из ваших двух элементов переключателя должен быть вложен в свой собственный элемент <code>label</code> .
testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own <code>label</code> element.");'
- text: 'Убедитесь, что каждый из ваших элементов <code>label</code> имеет закрывающий тег.'
testString: 'assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), "Make sure each of your <code>label</code> elements has a closing tag.");'
- text: Один из ваших переключателей должен иметь ярлык в <code>indoor</code> .
testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
- text: Один из ваших переключателей должен иметь ярлык на <code>outdoor</code> .
testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
- text: Каждый элемент вашего переключателя должен быть добавлен в тег <code>form</code> .
testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,69 @@
---
id: bad87fee1348bd9aedf08829
title: Create a Text Field
challengeType: 0
videoUrl: ''
localeTitle: Создание текстового поля
---
## Description
<section id="description"> Теперь давайте создадим веб-форму. Элементы ввода - удобный способ ввода данных от пользователя. Вы можете создать текстовый ввод следующим образом: <code>&lt;input type=&quot;text&quot;&gt;</code> Обратите внимание, что <code>input</code> элементы самозакрываются. </section>
## Instructions
<section id="instructions"> Создайте <code>input</code> элемент типа <code>text</code> ниже списков. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Ваше приложение должно иметь <code>input</code> элемент типа <code>text</code> .
testString: 'assert($("input[type=text]").length > 0, "Your app should have an <code>input</code> element of type <code>text</code>.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,79 @@
---
id: bad87fee1348bd9aedf08828
title: Create an Ordered List
challengeType: 0
videoUrl: ''
localeTitle: Создание упорядоченного списка
---
## Description
<section id="description"> HTML имеет еще один специальный элемент для создания <code>ordered lists</code> или нумерованных списков. Упорядоченные списки начинаются с элемента <code>&lt;ol&gt;</code> , за которым следует любое количество элементов <code>&lt;li&gt;</code> . Наконец, упорядоченные списки закрываются с помощью <code>&lt;/ol&gt;</code> Например: <blockquote> &lt;Ол&gt; <br> &lt;Li&gt; Гарфилд &lt;/ li&gt; <br> &lt;Li&gt; Сильвестр &lt;/ li&gt; <br> &lt;/ Ол&gt; </blockquote> создаст нумерованный список «Гарфилд» и «Сильвестр». </section>
## Instructions
<section id="instructions"> Создайте упорядоченный список из 3 лучших вещей, которые кошки ненавидят больше всего. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'У вас должен быть упорядоченный список для «Топ-3 вещей, которые ненавижу кошки:»'
testString: 'assert((/Top 3 things cats hate:/i).test($("ol").prev().text()), "You should have an ordered list for "Top 3 things cats hate:"");'
- text: 'У вас должен быть неупорядоченный список «Вещи, которые любят кошки»:'
testString: 'assert((/Things cats love:/i).test($("ul").prev().text()), "You should have an unordered list for "Things cats love:"");'
- text: У вас должен быть только один элемент <code>ul</code> .
testString: 'assert.equal($("ul").length, 1, "You should have only one <code>ul</code> element.");'
- text: У вас должен быть только один элемент <code>ol</code> .
testString: 'assert.equal($("ol").length, 1, "You should have only one <code>ol</code> element.");'
- text: У вас должно быть три элемента <code>li</code> в вашем элементе <code>ul</code> .
testString: 'assert.equal($("ul li").length, 3, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
- text: У вас должно быть три элемента <code>li</code> внутри вашего элемента <code>ol</code> .
testString: 'assert.equal($("ol li").length, 3, "You should have three <code>li</code> elements within your <code>ol</code> element.");'
- text: 'Убедитесь, что ваш элемент <code>ul</code> имеет закрывающий тег.'
testString: 'assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length, "Make sure your <code>ul</code> element has a closing tag.");'
- text: 'Убедитесь, что ваш элемент <code>ol</code> имеет закрывающий тег.'
testString: 'assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length, "Make sure your <code>ol</code> element has a closing tag.");'
- text: 'Убедитесь, что ваш элемент <code>li</code> имеет закрывающий тег.'
testString: 'assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length, "Make sure your <code>li</code> element has a closing tag.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,52 @@
---
id: 587d78aa367417b2b2512aed
title: Declare the Doctype of an HTML Document
challengeType: 0
videoUrl: ''
localeTitle: Объявить Doctype HTML-документа
---
## Description
<section id="description"> Вызовы до сих пор охватывали конкретные элементы HTML и их использование. Однако есть несколько элементов, которые дают общую структуру вашей странице и должны быть включены в каждый HTML-документ. В верхней части документа вам нужно указать браузеру, какую версию HTML использует ваша страница. HTML является развивающимся языком и регулярно обновляется. Большинство основных браузеров поддерживают самую последнюю спецификацию, которая является HTML5. Однако старые веб-страницы могут использовать предыдущие версии языка. Вы сообщите браузеру эту информацию, добавив в первую строку тег <code>&lt;!DOCTYPE ...&gt;</code> , где « <code>...</code> » - это версия HTML. Для HTML5 вы используете <code>&lt;!DOCTYPE html&gt;</code> . <code>!</code> и верхний регистр <code>DOCTYPE</code> важен, особенно для старых браузеров. <code>html</code> не чувствителен к регистру. Далее, весь ваш HTML-код необходимо обернуть в теги <code>html</code> . Открытие <code>&lt;html&gt;</code> идет непосредственно под линией <code>&lt;!DOCTYPE html&gt;</code> , а закрытие <code>&lt;/html&gt;</code> идет в конце страницы. Вот пример структуры страницы: <blockquote> &lt;! DOCTYPE html&gt; <br> &lt;HTML&gt; <br> &lt;! - Ваш HTML-код идет здесь -&gt; <br> &lt;/ Html&gt; </blockquote></section>
## Instructions
<section id="instructions"> Добавьте тег <code>DOCTYPE</code> для HTML5 в начало пустого документа HTML в редакторе кода. Под ним добавьте открывающие и закрывающие теги <code>html</code> , которые обертывают вокруг элемента <code>h1</code> . Заголовок может включать любой текст. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Ваш код должен содержать <code>&lt;!DOCTYPE html&gt;</code> .
testString: 'assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi), "Your code should include a <code>&lt;!DOCTYPE html&gt;</code> tag.");'
- text: Должен быть один элемент <code>html</code> .
testString: 'assert($("html").length == 1, "There should be one <code>html</code> element.");'
- text: Теги <code>html</code> должны охватывать один элемент <code>h1</code> .
testString: 'assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi), "The <code>html</code> tags should wrap around one <code>h1</code> element.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,66 @@
---
id: 587d78aa367417b2b2512aec
title: Define the Head and Body of an HTML Document
challengeType: 0
videoUrl: ''
localeTitle: Определение заголовка и тела документа HTML
---
## Description
<section id="description"> Вы можете добавить еще один уровень организации в свой HTML-документ в тегах <code>html</code> с элементами <code>head</code> и <code>body</code> . Любая разметка с информацией о Вашей странице будет идти в <code>head</code> метку. Тогда любая метка с содержимым страницы (то, что отображается для пользователя) войдет в тег <code>body</code> . Элементы метаданных, такие как <code>link</code> , <code>meta</code> , <code>title</code> и <code>style</code> , обычно входят в элемент <code>head</code> . Вот пример макета страницы: <blockquote> &lt;! DOCTYPE html&gt; <br> &lt;HTML&gt; <br> &lt;Голова&gt; <br> &lt;! - элементы метаданных -&gt; <br> &lt;/ HEAD&gt; <br> &lt;Тело&gt; <br> &lt;! - содержание страницы -&gt; <br> &lt;/ Body&gt; <br> &lt;/ Html&gt; </blockquote></section>
## Instructions
<section id="instructions"> Отредактируйте разметку, чтобы появилась <code>head</code> и <code>body</code> . Элемент <code>head</code> должен включать только <code>title</code> , а элемент <code>body</code> должен включать только <code>h1</code> и <code>p</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: На странице должен быть только один элемент <code>head</code> .
testString: 'assert($("head").length == 1, "There should be only one <code>head</code> element on the page.");'
- text: На странице должен быть только один элемент <code>body</code> .
testString: 'assert($("body").length == 1, "There should be only one <code>body</code> element on the page.");'
- text: Элемент <code>head</code> должен быть дочерним элементом <code>html</code> .
testString: 'assert($("html").children("head").length == 1, "The <code>head</code> element should be a child of the <code>html</code> element.");'
- text: Элемент <code>body</code> должен быть дочерним элементом <code>html</code> .
testString: 'assert($("html").children("body").length == 1, "The <code>body</code> element should be a child of the <code>html</code> element.");'
- text: Элемент <code>head</code> должен обернуть элемент <code>title</code> .
testString: 'assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi), "The <code>head</code> element should wrap around the <code>title</code> element.");'
- text: Элемент <code>body</code> должен обернуть оба элемента <code>h1</code> и <code>p</code> .
testString: 'assert($("body").children("h1").length == 1 && $("body").children("p").length == 1, "The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<!DOCTYPE html>
<html>
<title>The best page ever</title>
<h1>The best page ever</h1>
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
</html>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,57 @@
---
id: bad87fed1348bd9aedf08833
title: Delete HTML Elements
challengeType: 0
videoUrl: ''
localeTitle: Удалить элементы HTML
---
## Description
<section id="description"> Наш телефон не имеет большого пространства. Удалим ненужные элементы, чтобы мы могли начать строить CatPhotoApp. </section>
## Instructions
<section id="instructions"> Удалите элемент <code>h1</code> чтобы мы могли упростить наше представление. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Удалите элемент <code>h1</code> .
testString: 'assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi), "Delete your <code>h1</code> element.");'
- text: Оставьте свой элемент <code>h2</code> на странице.
testString: 'assert(code.match(/<h2>[\w\W]*<\/h2>/gi), "Leave your <code>h2</code> element on the page.");'
- text: Оставьте свой элемент <code>p</code> на странице.
testString: 'assert(code.match(/<p>[\w\W]*<\/p>/gi), "Leave your <code>p</code> element on the page.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,53 @@
---
id: bad87fee1348bd9aedf08833
title: Fill in the Blank with Placeholder Text
challengeType: 0
videoUrl: ''
localeTitle: Заполните пустое поле с текстом заполнителя
---
## Description
<section id="description"> Веб-разработчики традиционно используют <code>lorem ipsum text</code> качестве текста-заполнителя. Текст «lorem ipsum» случайным образом очищается от знаменитого отрывка Цицерона Древнего Рима. Текст Lorem ipsum использовался в качестве текста заполнителя с помощью наборов текста с 16 века, и эта традиция продолжается в Интернете. Ну, 5 веков достаточно долго. Поскольку мы создаем CatPhotoApp, давайте использовать что-то под названием <code>kitty ipsum text</code> . </section>
## Instructions
<section id="instructions"> Замените текст внутри вашего элемента <code>p</code> на первые несколько слов этого текста <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code> kitty: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code> </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Ваш элемент <code>p</code> должен содержать первые несколько слов предоставленного <code>kitty ipsum text</code> .
testString: 'assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,55 @@
---
id: bad87fee1348bd9aedf0887a
title: Headline with the h2 Element
challengeType: 0
videoUrl: ''
localeTitle: Заголовок с элементом h2
---
## Description
<section id="description"> В течение следующих нескольких уроков мы построим веб-приложение для HTML-кодов HTML5 по частям. Элемент <code>h2</code> вы добавите на этом шаге, добавит заголовок уровня 2 на веб-страницу. Этот элемент сообщает браузеру о структуре вашего веб-сайта. Элементы <code>h1</code> часто используются для основных заголовков, а элементы <code>h2</code> обычно используются для подзаголовков. Существуют также элементы <code>h3</code> , <code>h4</code> , <code>h5</code> и <code>h6</code> для обозначения разных уровней подзаголовков. </section>
## Instructions
<section id="instructions"> Добавьте тег <code>h2</code> который говорит «CatPhotoApp», чтобы создать второй <code>element</code> HTML под <code>element</code> «Hello World» <code>h1</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Создайте элемент <code>h2</code> .
testString: 'assert(($("h2").length > 0), "Create an <code>h2</code> element.");'
- text: 'Убедитесь, что ваш элемент <code>h2</code> имеет закрывающий тег.'
testString: 'assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length, "Make sure your <code>h2</code> element has a closing tag.");'
- text: Ваш элемент <code>h2</code> должен иметь текст «CatPhotoApp».
testString: 'assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), "Your <code>h2</code> element should have the text "CatPhotoApp".");'
- text: Ваш элемент <code>h1</code> должен иметь текст «Hello World».
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h1>Hello World</h1>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,54 @@
---
id: bad87fee1348bd9aedf08801
title: Inform with the Paragraph Element
challengeType: 0
videoUrl: ''
localeTitle: Информировать элемент абзаца
---
## Description
<section id="description"> <code>p</code> элементов являются предпочтительным элементом текста абзаца на веб-сайтах. <code>p</code> является коротким для «абзаца». Вы можете создать элемент абзаца следующим образом: <code>&lt;p&gt;I&#39;m ap tag!&lt;/p&gt;</code> </section>
## Instructions
<section id="instructions"> Создайте <code>p</code> элемент под вашим элементом <code>h2</code> и дайте ему текст «Hello Paragraph». </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Создайте элемент <code>p</code> .
testString: 'assert(($("p").length > 0), "Create a <code>p</code> element.");'
- text: Ваш элемент <code>p</code> должен иметь текст «Hello Paragraph».
testString: 'assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), "Your <code>p</code> element should have the text "Hello Paragraph".");'
- text: 'Убедитесь, что ваш элемент <code>p</code> имеет закрывающий тег.'
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure your <code>p</code> element has a closing tag.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,63 @@
---
id: bad87fee1348bd9aecf08801
title: Introduction to HTML5 Elements
challengeType: 0
videoUrl: ''
localeTitle: Введение в элементы HTML5
---
## Description
<section id="description"> HTML5 вводит более описательные HTML-теги. К ним относятся <code>header</code> , <code>footer</code> , <code>nav</code> , <code>video</code> , <code>article</code> , <code>section</code> и другие. Эти теги упрощают чтение вашего HTML, а также помогают в поисковой оптимизации (SEO) и доступности. <code>main</code> тег HTML5 помогает поисковым системам и другим разработчикам находить основное содержимое вашей страницы. <strong>Заметка</strong> <br> Многие из новых тегов HTML5 и их преимущества описаны в разделе «Прикладная доступность». </section>
## Instructions
<section id="instructions"> Создайте второй элемент <code>p</code> после существующего элемента <code>p</code> со следующим текстом <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> kitty: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> Оберните абзацы с помощью <code>main</code> и закрывающего <code>main</code> тега. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Вам нужны 2 <code>p</code> элемента с текстом Китти Ipsum.
testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");'
- text: 'Убедитесь, что каждый из ваших <code>p</code> элементов имеет закрывающий тег.'
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
- text: ''
testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.");'
- text: Ваш код должен иметь один <code>main</code> элемент.
testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");'
- text: <code>main</code> элемент должен содержать два элемента абзаца в качестве детей.
testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");'
- text: <code>main</code> тег открытия должен появиться перед тегом первого абзаца.
testString: 'assert(code.match(/<main>\s*?<p>/g), "The opening <code>main</code> tag should come before the first paragraph tag.");'
- text: Закрывающий <code>main</code> тег должен появиться после второго тега абзаца закрытия.
testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing <code>main</code> tag should come after the second closing paragraph tag.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,62 @@
---
id: bad87fee1348bd9aedf08816
title: Link to External Pages with Anchor Elements
challengeType: 0
videoUrl: ''
localeTitle: Ссылка на внешние страницы с элементами привязки
---
## Description
<section id="description"> Вы можете использовать элементы <code>anchor</code> для ссылки на контент вне вашей веб-страницы. элементам <code>anchor</code> нужен адрес веб-сайта назначения, называемый атрибутом <code>href</code> . Им также нужен якорный текст. Вот пример: <code>&lt;a href=&quot;https://freecodecamp.org&quot;&gt;this links to freecodecamp.org&lt;/a&gt;</code> Затем ваш браузер отобразит текст <strong>«это ссылки на freecodecamp.org»</strong> в качестве ссылки, которую вы можете щелкнуть. И эта ссылка приведет вас к веб-адресу <strong>https://www.freecodecamp.org</strong> . </section>
## Instructions
undefined
## Tests
<section id='tests'>
```yml
tests:
- text: Ваш элемент должен иметь <code>a</code> <code>anchor text</code> в «кошки фотографии».
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");'
- text: 'Вам нужно <code>a</code> элемент, ссылки на <code>http://freecatphotoapp .com</code>'
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>");'
- text: ''
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,73 @@
---
id: bad88fee1348bd9aedf08816
title: Link to Internal Sections of a Page with Anchor Elements
challengeType: 0
videoUrl: ''
localeTitle: Ссылка на внутренние разделы страницы с элементами привязки
---
## Description
<section id="description"> Элементы привязки также могут использоваться для создания внутренних ссылок для перехода к различным разделам веб-страницы. Чтобы создать внутреннюю ссылку, вы назначаете атрибут <code>href</code> ссылки на хэш-символ <code>#</code> плюс значение атрибута <code>id</code> для элемента, к которому вы хотите внутренне связать, обычно дальше вниз по странице. Затем вам нужно добавить тот же атрибут <code>id</code> к элементу, к которому вы привязываетесь. <code>id</code> - это атрибут, который однозначно описывает элемент. Ниже приведен пример внутренней привязной ссылки и ее целевого элемента: <blockquote> &lt;a href=&quot;#contacts-header&quot;&gt; Контакты &lt;/a&gt; <br> ... <br> &lt;h2 id = &quot;contacts-header&quot;&gt; Контакты &lt;/ h2&gt; </blockquote> Когда пользователи нажимают ссылку «Контакты», они будут отправлены в раздел веб-страницы с элементом заголовка « <b>Контакты»</b> . </section>
## Instructions
<section id="instructions"> Измените внешнюю ссылку на внутреннюю ссылку, изменив атрибут <code>href</code> на «#footer» и текст «Фотографии кошки» на «Перейти к нижнему». Удалите атрибут <code>target=&quot;_blank&quot;</code> из тега привязки, поскольку это заставляет связанный документ открываться на вкладке нового окна. Затем добавьте атрибут <code>id</code> со значением «footer» в элемент <code>&lt;footer&gt;</code> в нижней части страницы. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: На вашей странице должен быть только один тег привязки.
testString: 'assert($("a").length == 1, "There should be only one anchor tag on your page.");'
- text: На вашей странице должен быть только один <code>footer</code> тег.
testString: 'assert($("footer").length == 1, "There should be only one <code>footer</code> tag on your page.");'
- text: 'Тег <code>a</code> должен иметь атрибут <code>href</code> установленный на «#footer».'
testString: 'assert($("a").eq(0).attr("href") == "#footer", "The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".");'
- text: Тег <code>a</code> должен не иметь <code>target</code> атрибута
testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The <code>a</code> tag should not have a <code>target</code> attribute");'
- text: Текст должен быть «Перейти к низу». <code>a</code>
testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");'
- text: Тег <code>footer</code> должен иметь атрибут <code>id</code> установленный в «нижний колонтитул».
testString: 'assert($("footer").eq(0).attr("id") == "footer", "The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
</main>
<footer>Copyright Cat Photo App</footer>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,57 @@
---
id: bad87fee1348bd9aedf08817
title: Make Dead Links Using the Hash Symbol
challengeType: 0
videoUrl: ''
localeTitle: Создание мертвых ссылок с использованием символа хэша
---
## Description
<section id="description"> Иногда вы хотите добавить элементы на свой веб - сайт , прежде чем вы знаете , где они будут ссылаться. <code>a</code> Это также удобно, когда вы меняете поведение ссылки с помощью <code>JavaScript</code> , о чем мы узнаем позже. </section>
## Instructions
<section id="instructions"> Текущее значение атрибута <code>href</code> - это ссылка, которая указывает на «http://freecatphotoapp.com». Замените значение атрибута <code>href</code> символом <code>#</code> , также известным как хэш-символ, чтобы создать мертвую ссылку. Например: <code>href=&quot;#&quot;</code> </section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'Ваш элемент должен быть мертвой ссылке с значением <code>a</code> <code>href</code> атрибута установлено значение «#».'
testString: 'assert($("a").attr("href") === "#", "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a>.</p>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,72 @@
---
id: bad87fee1348bd9aede08817
title: Nest an Anchor Element within a Paragraph
challengeType: 0
videoUrl: ''
localeTitle: Гнездо анкерного элемента в абзаце
---
## Description
<section id="description"> Вы можете вставлять ссылки в другие текстовые элементы. <blockquote> &lt;Р&gt; <br> Вот вам ссылка &lt;a target=&quot;_blank&quot; href=&quot;http://freecodecamp.org&quot;&gt; на freecodecamp.org &lt;/a&gt; для вас. <br> &lt;/ Р&gt; </blockquote> Давайте разберем пример: Обычный текст завернут в элемент <code>p</code> : <br> <code>&lt;p&gt; Here&#39;s a ... for you to follow. &lt;/p&gt;</code> Следующий элемент <code>anchor</code> <code>&lt;a&gt;</code> (для которого требуется закрывающий тег <code>&lt;/a&gt;</code> ): <br> <code>&lt;a&gt; ... &lt;/a&gt;</code> <code>target</code> - это атрибут тега привязки, который указывает, где можно открыть ссылку, а значение <code>&quot;_blank&quot;</code> указывает на открытие ссылки на новой вкладке. <code>href</code> является атрибутом тега привязки, который содержит URL-адрес связь: <br> <code>&lt;a href=&quot;http://freecodecamp.org&quot;&gt; ... &lt;/a&gt;</code> В тексте, <strong>«ссылка на freecodecamp.org»</strong> , в элементе <code>anchor text</code> , который называется <code>anchor text</code> , будет отображаться ссылка: <br> <code>&lt;a href=&quot; ... &quot;&gt;link to freecodecamp.org&lt;/a&gt;</code> Окончательный результат примера будет выглядеть так: <br><p> Вот <a target="_blank" href="http://freecodecamp.org">ссылка на freecodecamp.org</a> для вас. </p></section>
## Instructions
<section id="instructions"> Теперь гнездо уже существующий <code>a</code> элемент в новом <code>p</code> элемент (только после того, как существующего <code>main</code> элемента). В новом абзаце должен быть текст с надписью «Просмотр фотографий кошек», где «фотографии кошек» - это ссылка, а остальная часть текста - простой текст. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'Вам нужно <code>a</code> элемент , который связывает с «http://freecatphotoapp.com».'
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an <code>a</code> element that links to "http://freecatphotoapp.com".");'
- text: Ваш элемент должен иметь якорный текст «кошачьи фотографии» <code>a</code>
testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");'
- text: 'Создать новый <code>p</code> элемент вокруг вашего <code>a</code> элементе. Там должно быть , по крайней мере , 3 всего <code>p</code> теги в вашем HTML коде.'
testString: 'assert($("p") && $("p").length > 2, "Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.");'
- text: Ваш элемент должен быть вложен в вашем новом <code>a</code> <code>p</code> элемент.
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")), "Your <code>a</code> element should be nested within your new <code>p</code> element.");'
- text: Ваш элемент <code>p</code> должен иметь текст «Просмотреть больше» (с пробелом после него).
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)), "Your <code>p</code> element should have the text "View more " (with a space after it).");'
- text: Ваш элемент <em>не</em> должен иметь текст «Больше». <code>a</code>
testString: 'assert(!$("a").text().match(/View\smore/gi), "Your <code>a</code> element should <em>not</em> have the text "View more".");'
- text: 'Убедитесь, что каждый из ваших <code>p</code> элементов имеет закрывающий тег.'
testString: 'assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
- text: 'Убедитесь , что каждый из ваших <code>a</code> элементы закрывающий тег.'
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<a href="http://freecatphotoapp.com" target="_blank">cat photos</a>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,83 @@
---
id: bad87fee1348bd9aede08835
title: Nest Many Elements within a Single div Element
challengeType: 0
videoUrl: ''
localeTitle: Гнездо Много элементов в одном элементе div
---
## Description
<section id="description"> Элемент <code>div</code> , также известный как элемент разделения, является контейнером общего назначения для других элементов. Элемент <code>div</code> вероятно, является наиболее часто используемым HTML-элементом. Как и любой другой несамозакрывающийся элемент, вы можете открыть элемент <code>div</code> с помощью <code>&lt;div&gt;</code> и закрыть его в другой строке с помощью <code>&lt;/div&gt;</code> . </section>
## Instructions
<section id="instructions"> Гнездо ваших «Вещей кошек любят» и «Вещи, которые ненавидят кошек», перечисляет все в одном элементе <code>div</code> . Подсказка: Попробуйте поместить ваше открытие <code>div</code> тега выше ваших «Things кошек любит» <code>p</code> элемент и ваше закрытие <code>div</code> тег после закрытия <code>ol</code> тега , так что оба ваших списков находятся в пределах одного <code>div</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Гнездо ваших элементов <code>p</code> внутри вашего элемента <code>div</code> .
testString: 'assert($("div").children("p").length > 1, "Nest your <code>p</code> elements inside your <code>div</code> element.");'
- text: Вставьте свой элемент <code>ul</code> внутри элемента <code>div</code> .
testString: 'assert($("div").children("ul").length > 0, "Nest your <code>ul</code> element inside your <code>div</code> element.");'
- text: Гнездо вашего элемента <code>ol</code> внутри вашего элемента <code>div</code> .
testString: 'assert($("div").children("ol").length > 0, "Nest your <code>ol</code> element inside your <code>div</code> element.");'
- text: 'Убедитесь, что ваш элемент <code>div</code> имеет закрывающий тег.'
testString: 'assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length, "Make sure your <code>div</code> element has a closing tag.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,49 @@
---
id: bd7123c8c441eddfaeb5bdef
title: Say Hello to HTML Elements
challengeType: 0
videoUrl: ''
localeTitle: Произнести Hello to HTML Elements
---
## Description
<section id="description"> Добро пожаловать в проблемы с кодированием HTML-кода freeCodeCamp. Постепенно вы будете проходить через веб-разработку. Во-первых, вы начнете с создания простой веб-страницы с использованием HTML. Вы можете редактировать <code>code</code> в <code>code editor</code> , который встроен в эту веб-страницу. Вы видите код в редакторе кода, который говорит <code>&lt;h1&gt;Hello&lt;/h1&gt;</code> ? Это <code>element</code> HTML. Большинство элементов HTML имеют <code>opening tag</code> и <code>closing tag</code> . Теги открытия выглядят следующим образом: <code>&lt;h1&gt;</code> Закрывающие теги выглядят следующим образом: <code>&lt;/h1&gt;</code> Единственная разница между тегами открытия и закрытия - это прямая косая черта после открывающей скобки закрывающего тега. У каждой задачи есть тесты, которые вы можете запустить в любое время, нажав кнопку «Запустить тесты». Когда вы пройдете все тесты, вам будет предложено отправить ваше решение и перейти к следующему заданию на кодирование. </section>
## Instructions
<section id="instructions"> Чтобы пройти тест по этой проблеме, измените текст своего элемента <code>h1</code> , чтобы сказать «Hello World». </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Ваш элемент <code>h1</code> должен иметь текст «Hello World».
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h1>Hello</h1>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,61 @@
---
id: bad87fee1348bd9aedf08820
title: Turn an Image into a Link
challengeType: 0
videoUrl: ''
localeTitle: Поверните изображение в ссылку
---
## Description
<section id="description"> Вы можете сделать элементы в ссылки, гнездящихся их внутри <code>a</code> элементе. Nest вашего изображения внутри <code>a</code> элементе. Вот пример: <code>&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://bit.ly/fcc-running-cats&quot; alt=&quot;Three kittens running towards the camera.&quot;&gt;&lt;/a&gt;</code> забудьте использовать <code>#</code> в качестве вашего элемента <code>a</code> <code>href</code> собственности , с тем , чтобы превратить его в мертвую ссылку. </section>
## Instructions
<section id="instructions"> Поместите существующий элемент изображения в элемент привязки. Когда вы это сделаете, наведите курсор мыши на изображение. Нормальный указатель курсора должен стать указателем на ссылку. Фотография теперь является ссылкой. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Вложите существующий элемент <code>img</code> элемент <code>a</code> .
testString: 'assert($("a").children("img").length > 0, "Nest the existing <code>img</code> element within an <code>a</code> element.");'
- text: 'Ваш элемент должен быть мертвой ссылке с <code>a</code> <code>href</code> атрибута равным <code>#</code> .'
testString: 'assert(new RegExp("#").test($("a").children("img").parent().attr("href")), "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.");'
- text: 'Убедитесь , что каждый из ваших <code>a</code> элементы закрывающий тег.'
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,61 @@
---
id: bad87fee1348bd9aedf08802
title: Uncomment HTML
challengeType: 0
videoUrl: ''
localeTitle: Uncomment HTML
---
## Description
<section id="description"> Комментирование - это способ, которым вы можете оставлять комментарии для других разработчиков в своем коде, не влияя на итоговый вывод, который отображается конечному пользователю. Комментирование также является удобным способом сделать код неактивным, не удаляя его целиком. Комментарии в HTML начинаются с <code>&lt;!--</code> , и заканчивается на <code>--&gt;</code> </section>
## Instructions
<section id="instructions"> Раскомментируйте свои элементы <code>h1</code> , <code>h2</code> и <code>p</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'Сделайте свой элемент <code>h1</code> видимым на своей странице, раскомментируя его.'
testString: 'assert($("h1").length > 0, "Make your <code>h1</code> element visible on your page by uncommenting it.");'
- text: 'Сделайте свой элемент <code>h2</code> видимым на своей странице, раскомментируя его.'
testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");'
- text: 'Сделайте свой элемент <code>p</code> видимым на своей странице, раскомментируя его.'
testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");'
- text: 'Обязательно удалите все трейлинг-теги комментариев, т. Е. <code>--&gt;</code> .'
testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
-->
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

View File

@@ -0,0 +1,71 @@
---
id: bad87fee1348bd9aedc08830
title: Use HTML5 to Require a Field
challengeType: 0
videoUrl: ''
localeTitle: Использовать HTML5 для запроса поля
---
## Description
<section id="description"> Вы можете потребовать определенные поля формы, чтобы ваш пользователь не смог отправить вашу форму до тех пор, пока он или она не заполнили их. Например, если вы хотите внести требуемое текстовое поле ввода, вы можете просто добавить атрибут, <code>required</code> вашего элемента <code>input</code> , например: <code>&lt;input type=&quot;text&quot; required&gt;</code> </section>
## Instructions
<section id="instructions"> Сделайте ваш текст <code>input</code> в <code>required</code> поле, чтобы ваш пользователь не может отправить форму без завершения этого поля. Затем попробуйте отправить форму без ввода какого-либо текста. Посмотрите, как ваша форма HTML5 уведомляет вас о том, что это поле необходимо? </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Элемент <code>input</code> текста должен иметь <code>required</code> атрибут.
testString: 'assert($("input").prop("required"), "Your text <code>input</code> element should have the <code>required</code> attribute.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
</main>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>