2022-09-27 08:30:30 +00:00
---
id: 5d5a813321b9e3db6c106a46
title: Крок 1
challengeType: 0
dashedName: step-1
---
# --description--
2022-10-05 14:07:55 +00:00
JavaScript – це потужна мова, яка дозволяє створювати інтерактивні вебсайти. Для початку створіть стандартний шаблонний код HTML з `DOCTYPE` , `html` , `head` та `body` . Додайте елемент `title` та `link` до своєї таблиці стилів та тег `meta` до `charset` . Потім створіть елемент `div` , що має id зі значенням `game` , в межах `body` . Для елемента `title` використайте текст `RPG - Dragon Repeller` .
2022-09-27 08:30:30 +00:00
# --hints--
Ваш код повинен мати посилання `DOCTYPE` .
```js
assert(code.match(/< !DOCTYPE/gi));
```
Ви повинні додати пробіл після посилання `DOCTYPE` .
```js
assert(code.match(/< !DOCTYPE\s+/gi));
```
Ви повинні визначити тип документа як `html` .
```js
assert(code.match(/< !DOCTYPE\s+html/gi));
```
Ви повинні закрити декларацію `DOCTYPE` з допомогою `>` після типу.
```js
assert(code.match(/<!DOCTYPE \s+html \s*> /gi));
```
2022-10-05 14:07:55 +00:00
Ваш елемент `html` повинен мати початковий тег. Н е забудьте атрибут `lang` .
2022-09-27 08:30:30 +00:00
```js
assert(code.match(/< html \s+ lang \s*= \s*('|") en \1\s* > /gi));
```
2022-10-05 14:07:55 +00:00
Ваш елемент `html` повинен мати кінцевий тег.
2022-09-27 08:30:30 +00:00
```js
assert(code.match(/< \/html \s* > /));
```
Оголошення `DOCTYPE` повинне бути на початку вашого HTML.
```js
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE \s+html \s*> /i));
```
2022-10-05 14:07:55 +00:00
Ви повинні мати початковий тег `head` .
2022-09-27 08:30:30 +00:00
```js
assert(code.match(/< head \s* > /i));
```
2022-10-05 14:07:55 +00:00
Ви повинні мати кінцевий тег `head` .
2022-09-27 08:30:30 +00:00
```js
assert(code.match(/< \/head \s* > /i));
```
2022-10-05 14:07:55 +00:00
Ви повинні мати початковий тег `body` .
2022-09-27 08:30:30 +00:00
```js
assert(code.match(/< body \s* > /i));
```
2022-10-05 14:07:55 +00:00
Ви повинні мати кінцевий тег `body` .
2022-09-27 08:30:30 +00:00
```js
assert(code.match(/< \/body \s* > /i));
```
Елементи `head` та `body` повинні бути братськими.
```js
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
```
Елемент `head` повинен бути в межах елемента `html` .
```js
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
```
Елемент `body` повинен бути в межах елемента `html` .
```js
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
```
Ваш код повинен мати елемент `meta` .
```js
const meta = document.querySelector('meta');
assert.exists(meta);
```
Ваш елемент `meta` повинен мати атрибут `charset` зі значенням `UTF-8` .
```js
assert.match(code, /< meta [ \s\S]+? charset = ('|"|`)UTF-8 \1/i)
```
Ваш код повинен мати елемент `title` .
```js
const title = document.querySelector('title');
assert.exists(title);
```
Ваш код повинен мати елемент `link` .
```js
const link = document.querySelector('head > link');
assert.exists(link);
```
Ви повинні мати елемент `div` .
```js
const div = document.querySelector('div');
assert.exists(div);
```
Ваш елемент `div` повинен мати атрибут `id` зі значенням `game` .
```js
const div = document.querySelector('div');
assert.equal(div?.id, 'game');
```
Ваш елемент `div` повинен бути в межах елемента `body` .
```js
const div = document.querySelector('div');
assert.equal(div?.parentElement?.localName, 'body');
```
# --seed--
## --seed-contents--
```html
--fcc-editable-region--
--fcc-editable-region--
```