Создание базовой структуры и тегов HTML

Введение

В этом практическом занятии (лабораторной работе) студенты научатся основным навыкам создания базовой структуры HTML-документа и понимания важных HTML-тегов. Практическое занятие (лабораторная работа) проводит участников по этапам настройки HTML-документа с правильным объявлением DOCTYPE, добавлению корневого тега HTML, настройке раздела head и изучению различных типов HTML-тегов.

Участники начнут с создания HTML5-документа, узнав, как объявить тип документа, структурировать базовый макет страницы и понять назначение ключевых элементов, таких как <html>, <head> и <body>. К концу практического занятия (лабораторной работы) студенты получат всестороннее понимание того, как создать корректно сформированный HTML-документ и использовать различные HTML-теги для структурирования содержимого веб-страницы.

Настройка HTML-документа с объявлением DOCTYPE

На этом этапе вы узнаете, как создать базовую структуру HTML-документа, добавив объявление DOCTYPE. Объявление DOCTYPE является важным, так как оно сообщает веб-браузерам, какую версию HTML вы используете в документе, обеспечивая правильное отображение и совместимость.

Сначала откройте WebIDE и создайте новый файл с именем index.html в директории ~/project.

Объявление DOCTYPE для HTML5 простое и понятное. Вы добавите его в качестве первой строки своего HTML-документа:

<!doctype html>

Это объявление сообщает браузерам, что вы используете HTML5, последнюю версию HTML. Регистр букв не имеет значения, но для единообразия и читаемости рекомендуется использовать строчные буквы.

Давайте создадим полную базовую структуру HTML-документа с объявлением DOCTYPE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML!</h1>
  </body>
</html>

Структура HTML-документа

Примечание: Узнайте больше о Просмотре HTML-файлов в WebIDE.

Пример вывода в браузере будет выглядеть так:

Welcome to HTML!

Основные моменты, которые необходимо запомнить:

Объявление DOCTYPE должно быть первой строкой в вашем HTML-документе.
Оно помогает браузерам понять, какую версию HTML вы используете.
Для современной веб-разработки используйте <!DOCTYPE html> для HTML5.
Объявление не является HTML-тегом; это инструкция для браузера.

Добавление корневого тега HTML и базовой структуры

На этом этапе вы узнаете о фундаментальной структуре HTML-документа, сконцентрировавшись на корневом теге HTML и базовой структуре документа. Тег <html> является контейнером для всех других HTML-элементов и служит корневым элементом HTML-страницы.

Откройте файл index.html, который вы создали на предыдущем этапе, в WebIDE. Давайте расширим предыдущую структуру HTML, добавив полный корневой тег и его важные компоненты:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML Structure</h1>
    <p>This is the basic structure of an HTML document.</p>
  </body>
</html>

Разберем основные компоненты:

Тег <html>: Корневой элемент, который заключает все остальное HTML-содержимое.
Атрибут lang="en": Указывает язык документа (в данном случае - английский).
Два основных дочерних элемента:
- <head>: Содержит метаданные о документе.
- <body>: Содержит видимое содержимое веб-страницы.

Пример вывода в веб-браузере будет выглядеть так:

Welcome to HTML Structure
This is the basic structure of an HTML document.

Основные моменты, которые необходимо запомнить:

Каждый HTML-документ должен иметь корневой тег <html>.
Атрибут lang помогает в обеспечении доступности и оптимизации для поисковых систем.
Документ разделен на секции <head> и <body>.
Правильное вложение тегов является важным для валидного HTML.

Настройка раздела с использованием мета-тегов и тега </h2> <p>На этом этапе вы узнаете о разделе <code><head></code> HTML-документа и о том, как использовать мета-теги и тег title для предоставления важной информации о вашей веб-странице.</p> <p>Откройте файл <code>index.html</code> в WebIDE и обновите раздел <code><head></code> с помощью следующего примера:</p> <pre><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="A simple HTML learning page" /> <title>My HTML Learning Journey</title> </head> <body> <h1>Welcome to HTML Metadata</h1> <p>This page demonstrates head section configuration.</p> </body> </html> </code></pre> <p>Разберем основные мета-теги и их назначения:</p> <ol> <li><code><meta charset="UTF-8"></code>: Указывает кодировку символов для документа.</li> <li><code><meta name="viewport"></code>: Гарантирует правильное отображение на различных устройствах.</li> <li><code><meta name="description"></code>: Предоставляет краткое описание страницы для поисковых систем.</li> <li><code><title></code>: Устанавливает заголовок страницы, отображаемый во вкладке браузера.</li> </ol> <p>Пример вывода во вкладке браузера:</p> <pre><code>My HTML Learning Journey </code></pre> <p>Основные моменты, которые необходимо запомнить:</p> <ul> <li>Раздел <code><head></code> содержит метаданные о HTML-документе.</li> <li>Мета-теги предоставляют дополнительную информацию для браузеров и поисковых систем.</li> <li>Тег <code><title></code> важен для идентификации страницы и SEO (поисковая оптимизация).</li> <li>Всегда включайте мета-теги кодировки символов и viewport.</li> </ul> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%D0%BF%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B4%D0%B8%D0%BD%D0%BE%D1%87%D0%BD%D1%8B%D1%85-%D0%B8-%D0%B4%D0%B2%D0%BE%D0%B9%D0%BD%D1%8B%D1%85-html-%D1%82%D0%B5%D0%B3%D0%BE%D0%B2"></div> <h2 id="понимание-одиночных-и-двойных-html-тегов">Понимание одиночных и двойных HTML-тегов</h2> <p>На этом этапе вы узнаете о двух типах HTML-тегов: одиночных (самозакрывающихся) тегах и двойных тегах. Понимание различий между этими тегами является важным для создания хорошо структурированных HTML-документов.</p> <p>Откройте файл <code>index.html</code> в WebIDE и обновите раздел body с помощью следующего примера:</p> <pre><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML Tags Exploration</title> </head> <body>  <h1>Welcome to HTML Tags</h1> <p>This is a paragraph with <strong>bold text</strong>.</p>  <img src="example.jpg" alt="Example Image" /> <br /> <input type="text" placeholder="Enter your name" /> </body> </html> </code></pre> <p>Разберем разные типы тегов:</p> <p>Двойные теги (парные теги):</p> <ul> <li>Имеют открывающий тег <code><tag></code> и закрывающий тег <code></tag></code>.</li> <li>Содержимое помещается между открывающим и закрывающим тегами.</li> <li>Примеры: <code><h1></code>, <code><p></code>, <code><strong></code>, <code><div></code>.</li> </ul> <p>Одиночные теги (самозакрывающиеся теги):</p> <ul> <li>Не имеют отдельного закрывающего тега.</li> <li>Закрываются сами внутри тега.</li> <li>Примеры: <code><img></code>, <code><br></code>, <code><input></code>.</li> </ul> <p>Пример вывода в браузере будет выглядеть так:</p> <pre><code>Welcome to HTML Tags This is a paragraph with bold text. [Здесь должна быть отображена картинка] [Здесь должен быть показано текстовое поле ввода] </code></pre> <p><img src="/cdn-cgi/image/format=auto,quality=60,onerror=redirect/https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/web/lab-create-basic-html-structure-and-tags/ru/../assets/20250110-10-53-27-6sPaawNK.png" alt="Пример вывода HTML-тегов"></p> <p>Основные моменты, которые необходимо запомнить:</p> <ul> <li>Двойные теги заключают содержимое и требуют как открывающего, так и закрывающего тегов.</li> <li>Одиночные теги являются самодостаточными и не заключают содержимое.</li> <li>Всегда закрывайте двойные теги, чтобы сохранить правильную структуру HTML.</li> <li>Некоторые одиночные теги могут иметь атрибуты для предоставления дополнительной информации.</li> </ul> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%D0%B8%D1%81%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%82%D0%B5%D0%B3%D0%B0-%3Cbody%3E-%D0%B8-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81%D0%BE%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%BC%D0%BE%D0%B3%D0%BE-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></div> <h2 id="исследование-тега--и-размещения-содержимого-страницы">Исследование тега <body> и размещения содержимого страницы</h2> <p>На этом этапе вы узнаете о теге <code><body></code> и о том, как структурировать контент в HTML-документе. Тег body - это место, где размещается все видимое содержимое веб-страницы.</p> <p>Откройте файл <code>index.html</code> в WebIDE и обновите раздел body с помощью следующего примера:</p> <pre><code class="language-html"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Content Placement Example</title> </head> <body>  <h1>Welcome to HTML Content Placement</h1> <h2>Subheading Level 2</h2> <h3>Subheading Level 3</h3>  <p>This is a paragraph explaining the importance of content structure.</p>  <h4>Key HTML Elements:</h4> <ul> <li>Headings</li> <li>Paragraphs</li> <li>Lists</li> </ul>  <div> <p>This paragraph is inside a div container.</p> </div>  <a href="https://example.com">Visit Example Website</a> <img src="example.jpg" alt="Example Image" width="300" /> </body> </html> </code></pre> <p>Пример вывода в браузере будет выглядеть так:</p> <p><img src="/cdn-cgi/image/format=auto,quality=60,onerror=redirect/https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/web/lab-create-basic-html-structure-and-tags/ru/../assets/20250113-15-36-31-2tbySUGL.png" alt="Пример вывода размещения контента HTML"></p> <p>Основные моменты, которые необходимо запомнить:</p> <ul> <li>Тег <code><body></code> содержит все видимое содержимое страницы.</li> <li>Используйте заголовочные теги (<code><h1></code> - <code><h6></code>), чтобы создать иерархию контента.</li> <li>Абзацы, списки и другие элементы помогают организовать информацию.</li> <li>Тег <code><div></code> может группировать и структурировать контент.</li> <li>Включайте ссылки и изображения, чтобы повысить интерактивность страницы.</li> </ul> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%D1%80%D0%B5%D0%B7%D1%8E%D0%BC%D0%B5"></div> <h2 id="резюме">Резюме</h2> <p>В этом практическом занятии (лабораторной работе) участники научились основным этапам создания базовой структуры HTML-документа. Процесс начался с настройки объявления DOCTYPE, которое является важным для обеспечения правильного отображения страницы в браузере и совместимости с HTML5. Участники изучили основные HTML-теги, включая корневой тег <code><html></code>, разделы <code><head></code> и <code><body></code>, и поняли их конкретные роли в организации документа.</p> <p>В рамках практического занятия студенты были приведены к созданию полноценного HTML-документа. Было показано, как добавлять мета-теги, устанавливать кодировку символов, определять заголовок страницы и размещать контент внутри тега body. Участники получили практический опыт в создании хорошо структурированной HTML-страницы, изучив ключевые концепции, такие как одиночные и двойные HTML-теги, правильное вложение тегов и важность семантической разметки в веб-разработке.</p> </article></div></div></div></div><span></span></div><div class="w-40 hidden lg:block shrink-0 sticky top-24"><div id="tutorial-detail-sidebar"><div class="mb-10"><p class="text-xs font-bold uppercase mt-10">Поделиться</p><div class="flex gap-2 mt-5"><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" aria-label="Поделиться в Twitter" href="https://twitter.com/intent/tweet?text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B9%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D1%8B%20%D0%B8%20%D1%82%D0%B5%D0%B3%D0%BE%D0%B2%20HTML%20%7C%20LabEx&url=https://labex.io/ru/tutorials/html-create-basic-html-structure-and-tags-451029" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#twitter" fill="#333"></use></svg></a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" aria-label="Поделиться в Facebook" href="https://www.facebook.com/sharer.php?title=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B9%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D1%8B%20%D0%B8%20%D1%82%D0%B5%D0%B3%D0%BE%D0%B2%20HTML%20%7C%20LabEx&u=https://labex.io/ru/tutorials/html-create-basic-html-structure-and-tags-451029" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#facebook" fill="#333"></use></svg></a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" aria-label="Поделиться в Google Classroom" href="https://classroom.google.com/share?url=https://labex.io/ru/tutorials/html-create-basic-html-structure-and-tags-451029" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#google-classroom-black" fill="#333"></use></svg></a></div></div><p class="text-xs font-bold uppercase">Темы</p><div class="flex flex-wrap gap-1 mt-5"><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/linux">Linux</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/devops">DevOps</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/cybersecurity">Кибербезопасность</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/kali">Kali Linux</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/devops-engineer">DevOps Engineer</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/cybersecurity-engineer">Cybersecurity Engineer</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/database">База данных</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/datascience">Наука о данных</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/rhel">Red Hat Enterprise Linux</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/comptia">CompTIA</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/docker">Docker</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/ckad">Обучение CKAD</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/cka">Обучение CKA</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/kubernetes">Kubernetes</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/devsecops">DevSecOps</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/lfcs">Обучение LFCS</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/python">Python</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/git">Git</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/shell">Shell</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/nmap">Nmap</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/wireshark">Wireshark</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/hydra">Hydra</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/java">Java</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/sqlite">SQLite</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/postgresql">PostgreSQL</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/mysql">MySQL</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/redis">Redis</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/mongodb">MongoDB</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/go">Golang</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/cpp">C++</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/c">C</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/jenkins">Jenkins</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/ansible">Ansible</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/pandas">Pandas</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/numpy">NumPy</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/sklearn">scikit-learn</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/matplotlib">Matplotlib</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/webdev">Веб-разработка</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/css">CSS</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/javascript">JavaScript</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ru/tutorials/category/react">React</a></div></div></div></div><div class="py-20"><div class="flex items-center align-center text-center w-full flex-row"><div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div><div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><span class="text-2xl">Связанные <a href="/learn/html" class="">HTML Курсы</a></span></div><div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div></div><div class="grid grid-cols-12 gap-6 mt-10"><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/ru/courses/html-for-beginners" class="course-card" data-v-784b32aa><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-784b32aa><div class="relative l-bg-divider overflow-hidden course-image" data-v-784b32aa><div class="overflow-hidden cover course undefined" data-v-784b32aa data-v-1737ff8a><img src="/cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ru" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="HTML для начинающих" loading="lazy" data-nuxt-img sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, (max-width: 1199px) 33vw, 25vw" srcset="/cdn-cgi/image/width=300,height=154,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ru 300w, /cdn-cgi/image/width=327,height=168,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ru 327w, /cdn-cgi/image/width=384,height=197,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ru 384w, /cdn-cgi/image/width=565,height=291,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ru 565w, /cdn-cgi/image/width=600,height=308,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ru 600w, /cdn-cgi/image/width=654,height=336,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ru 654w, /cdn-cgi/image/width=768,height=394,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ru 768w, /cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ru 1130w" class="w-full h-auto" fetchpriority="auto" data-v-1737ff8a></div></div><div class="p-3" data-v-784b32aa><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-784b32aa><span data-v-784b32aa>HTML для начинающих</span></p><div class="flex items-center fs-0" data-v-784b32aa><div class="flex-auto truncate overflow-hidden" data-v-784b32aa><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>html</span><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>web-development</span></div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/ru/courses/project-build-a-tic-tac-toe-web-app" class="course-card" data-v-784b32aa><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-784b32aa><div class="relative l-bg-divider overflow-hidden course-image" data-v-784b32aa><div class="overflow-hidden cover course undefined" data-v-784b32aa data-v-1737ff8a><img src="/cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ru" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Создание веб-приложения для игры в крестики-нолики" loading="lazy" data-nuxt-img sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, (max-width: 1199px) 33vw, 25vw" srcset="/cdn-cgi/image/width=300,height=154,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ru 300w, /cdn-cgi/image/width=327,height=168,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ru 327w, /cdn-cgi/image/width=384,height=197,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ru 384w, /cdn-cgi/image/width=565,height=291,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ru 565w, /cdn-cgi/image/width=600,height=308,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ru 600w, /cdn-cgi/image/width=654,height=336,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ru 654w, /cdn-cgi/image/width=768,height=394,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ru 768w, /cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ru 1130w" class="w-full h-auto" fetchpriority="auto" data-v-1737ff8a></div></div><div class="p-3" data-v-784b32aa><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-784b32aa><span data-v-784b32aa>Создание веб-приложения для игры в крестики-нолики</span></p><div class="flex items-center fs-0" data-v-784b32aa><div class="flex-auto truncate overflow-hidden" data-v-784b32aa><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>javascript</span><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>web-development</span></div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/ru/courses/project-creating-a-whack-a-mole-web-game" class="course-card" data-v-784b32aa><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-784b32aa><div class="relative l-bg-divider overflow-hidden course-image" data-v-784b32aa><div class="overflow-hidden cover course undefined" data-v-784b32aa data-v-1737ff8a><img src="/cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ru" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Создание веб-игры «Бей-кабанчика»" loading="lazy" data-nuxt-img sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, (max-width: 1199px) 33vw, 25vw" srcset="/cdn-cgi/image/width=300,height=154,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ru 300w, /cdn-cgi/image/width=327,height=168,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ru 327w, /cdn-cgi/image/width=384,height=197,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ru 384w, /cdn-cgi/image/width=565,height=291,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ru 565w, /cdn-cgi/image/width=600,height=308,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ru 600w, /cdn-cgi/image/width=654,height=336,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ru 654w, /cdn-cgi/image/width=768,height=394,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ru 768w, /cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ru 1130w" class="w-full h-auto" fetchpriority="auto" data-v-1737ff8a></div></div><div class="p-3" data-v-784b32aa><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-784b32aa><span data-v-784b32aa>Создание веб-игры «Бей-кабанчика»</span></p><div class="flex items-center fs-0" data-v-784b32aa><div class="flex-auto truncate overflow-hidden" data-v-784b32aa><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>javascript</span><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>web-development</span></div></div></div></div></a></div></div></div></div></section></div></main><footer class="bg-slate-800"><div class="pt-10 pb-1"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><div class="flex flex-col"><div class="flex items-center justify-between w-full"><a href="/ru" class="" aria-label="LabEx"><img src="/labex-logo-light.svg" onerror="this.setAttribute('data-error', 1)" width="98" height="30" alt="LabEx" loading="lazy" data-nuxt-img sizes="(max-width: 991px) 78px, 98px" srcset="/labex-logo-light.svg 78w, /labex-logo-light.svg 98w, /labex-logo-light.svg 156w, /labex-logo-light.svg 196w"></a><div><div class="language-switch" data-v-8a0b34f8><div data-headlessui-state class="relative inline-flex text-left rtl:text-right" data-v-8a0b34f8><div id="headlessui-menu-button-v-0-2-0" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="inline-flex w-full" role="button"><button type="button" class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm px-2.5 py-1.5 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 flex items-center gap-2 text-white hover:text-white hover:bg-slate-700" data-v-8a0b34f8><span data-v-8a0b34f8>🇷🇺 Русский</span></button></div></div></div></div></div><p class="mt-4 mb-4 text-gray-400">Изучайте Linux, DevOps и кибербезопасность с помощью практических лабораторий</p></div><div class="border-b border-gray-700 mb-8"></div><div class="grid gap-6 pb-10 lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-1"><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">ПРАКТИЧЕСКИЕ КУРСЫ</div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить кибербезопасность</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/comptia" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить CompTIA</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/data-science" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить Data Science</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/git" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить Git</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/kali" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить Kali Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/ansible" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить Ansible</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить DevOps</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/learn/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Изучить машинное обучение</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/courses/rhcsa-certification-exam-practice-exercises" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практический экзамен RHCSA</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/courses/comptia-linux-plus-training-labs" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">CompTIA Linux+</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/exercises/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Упражнения по Python</a></div><div class="flex flex-col gap-2"><a href="https://linux-commands.labex.io/" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Шпаргалка по командам Linux</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">ПРАКТИЧЕСКИЕ ЛАБОРАТОРИИ</div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/projects/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Проекты Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/projects/category/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Проекты Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/projects/category/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Проекты Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/projects/category/c" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Проекты на C</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/projects/category/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Проекты DevOps</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/projects/category/go" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Проекты Golang</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/git" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика Git</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/shell" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика Shell</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/mysql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика MySQL</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/mongodb" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика MongoDB</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика машинного обучения</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика кибербезопасности</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/nmap" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика Nmap</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/free-labs/wireshark" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Практика Wireshark</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">ИГРОВЫЕ ПЛОЩАДКИ</div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/linux-online-linux-terminal-and-playground-372915" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Онлайн-терминал Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/docker-online-docker-playground-372912" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Песочница Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/kubernetes-online-kubernetes-playground-593609" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Песочница Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/python-online-python-playground-372886" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Песочница Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/go-online-golang-playground-372913" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Песочница Golang</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/cpp-online-c-playground-372911" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Онлайн-компилятор C++</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/ansible-online-ansible-playground-415831" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Песочница Ansible</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/jenkins-online-jenkins-playground-415838" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Песочница Jenkins</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/java-online-java-playground-372914" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Песочница Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/rust-online-rust-playground-372918" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Песочница Rust</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/kali-online-kali-linux-terminal-and-playground-592935" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kali Linux Онлайн</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/nmap-online-nmap-playground-593613" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Nmap Онлайн</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/wireshark-online-wireshark-playground-593624" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Wireshark Онлайн</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/mysql-online-mysql-playground-372916" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MySQL Онлайн</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/kali-online-postgresql-database-playground-593616" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">PostgreSQL Онлайн</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/rhel-online-rhel-terminal-rhcsa-and-rhce-exam-playground-592933" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Симулятор экзамена RHCSA</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/lesson/choosing-a-linux-distribution" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Лучший дистрибутив Linux</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">УЧЕБНЫЕ МАТЕРИАЛЫ</div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Учебник по Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/category/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Учебник по Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/category/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Учебник по Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/category/mongodb" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Учебник по MongoDB</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/category/postgresql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Учебник по PostgreSQL</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/category/wireshark" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Учебник по Wireshark</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/category/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Учебник по DevOps</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/category/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Учебник по кибербезопасности</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/java-java-interview-questions-and-answers-593685" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Вопросы для собеседования по Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/python-python-interview-questions-and-answers-593698" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Вопросы для собеседования по Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/kubernetes-kubernetes-interview-questions-and-answers-593688" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Вопросы для собеседования по Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/linux-devops-interview-questions-and-answers-593679" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Вопросы для собеседования по DevOps</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/cybersecurity-cybersecurity-interview-questions-and-answers-593676" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Вопросы для собеседования по кибербезопасности</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/docker-docker-interview-questions-and-answers-593680" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Вопросы для собеседования по Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/linux-linux-interview-questions-and-answers-593689" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Вопросы для собеседования по Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/mongodb-mongodb-interview-questions-and-answers-593692" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Вопросы для собеседования по MongoDB</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ru/tutorials/linux-database-interview-questions-and-answers-593677" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Вопросы для собеседования по базам данных</a></div></div></div><div class="flex flex-wrap justify-center items-center gap-2 text-sm text-gray-400"><a href="https://support.labex.io" target="_blank" class="hover:text-white">ПОДДЕРЖКА</a><span class="text-gray-600">|</span><a href="mailto:info@labex.io" class="hover:text-white">СВЯЗАТЬСЯ С НАМИ</a><span class="text-gray-600">|</span><a href="/ru/forum" class="hover:text-white">ФОРУМ</a><span class="text-gray-600">|</span><a href="/ru/tutorials" class="hover:text-white">РУКОВОДСТВА</a><span class="text-gray-600">|</span><a href="/ru/free-labs" class="hover:text-white">БЕСПЛАТНЫЕ ЛАБЫ</a><span class="text-gray-600">|</span><a href="/ru/linuxjourney" class="hover:text-white">LINUX JOURNEY</a><span class="text-gray-600">|</span><a href="/ru/exercises" class="hover:text-white">УПРАЖНЕНИЯ</a><span class="text-gray-600">|</span><a href="/ru/teams" class="hover:text-white">LABEX TEAMS</a><span class="text-gray-600">|</span><a href="https://changelog.labex.io/" rel="noopener noreferrer" target="_blank" class="hover:text-white">CHANGELOG</a><span class="text-gray-600">|</span><a href="https://sitemap.labex.io/" rel="noopener noreferrer" class="hover:text-white">КАРТА САЙТА</a><span class="text-gray-600">|</span><a href="/ru/privacy" class="hover:text-white">ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ</a><span class="text-gray-600">|</span><a href="/ru/terms" class="hover:text-white">УСЛОВИЯ ОБСЛУЖИВАНИЯ</a></div><div class="sm:col-span-2 md:col-span-3 lg:col-span-4 text-gray-400 text-center"><div class="flex justify-center mt-4 mb-1"><a href="https://apps.apple.com/app/labex-linux-cybersecurity/id6765840991" target="_blank" rel="noopener noreferrer" aria-label="Download on the App Store"><img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="Download on the App Store" class="h-10 invert opacity-75 hover:opacity-100 transition-opacity"></a></div><div class="flex gap-2 mt-4 justify-center"><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Twitter" href="https://x.com/intent/follow?screen_name=wearelabex" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#x-black" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Facebook" href="https://www.facebook.com/WeAreLabEx/" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#facebook" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="LinkedIn" href="https://www.linkedin.com/company/wearelabex/mycompany/" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#linkedin" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="TikTok" href="https://www.tiktok.com/@labexcoding" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#tiktok" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="YouTube" href="https://www.youtube.com/@labexio" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#youtube" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Discord" href="https://discord.gg/J6k3u69nU6" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#discord" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Github" href="https://github.com/labex-labs" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#github" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Dockerhub" href="https://hub.docker.com/u/labex" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.C5hIuFRr.svg#docker-white" fill="#333"></use></svg></a></div></div></div></div><div class="py-3"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><p class="text-gray-400 font-medium text-center mb-0"> © 2017-2026 Chengdu Hangnuo Laibai Technology Co., Ltd. All Rights Reserved </p></div></div></footer></div><span></span><span></span><div class="alert-box" data-v-285a8eec></div><div></div></div><div id="teleports"></div><script>window.NUXT={};window.NUXT.config={public:{turnstile:{siteKey:"0x4AAAAAAAKM2eNgDcxF-9yH"},env:"production",appVersion:"v_1780022909252",cookie:{domain:""},gtag:{id:"G-ZFCX52ZJTZ"},ads:{id:"AW-882002536",registerConversionTag:"MBFrCIGFxNQYEOiUyaQD",subscriptionConversionTag:"crfuCO_z2tQYEOiUyaQD",purchaseConversionTag:"53Q2COvEvO0YEOiUyaQD"},gtm:{id:"GTM-TN7PC69C"},clarityProjectId:"qfnofdz0u8",apiBaseUrl:"/api/v2",ossBaseUrl:"https://file.labex.io",paypalClientId:"AZZ0ZORi-uwIWCMBvvWS8pN7yKq3dEmOuztg95XoqmPv0WihfrIU3XYEByj3y1sZcB6g2CW5tjcQOlHX",googleClientId:"359324822670-0i8infpcje3uh1ttca1d6stgdmdmhk1a.apps.googleusercontent.com",webPushServerKey:"BHIC0R48BSznqt8oCmKfQJkty77I0SV-EWdNqJ-3EPJ-HUBqnXKlrw_6cowDynxkVdNA26Y1q6s-VTaUdBYYICU",xAuth:"",stripeKey:"pk_live_51NnFfaISCR4x8ogMvIwl9UJQpDybg8tc41t8igKNOtejuDkPiQBvjShWmA94hm6Ii7hBpCxyiJ5CceACBNvIJWFj00KyBHumTT",i18n:{baseUrl:"https://labex.io",defaultLocale:"en",rootRedirect:"",redirectStatusCode:302,skipSettingLocaleOnNavigate:false,locales:[{code:"en",language:"en-US",dir:"ltr",name:"English",flag:"🇺🇸"},{code:"zh",language:"zh-CN",dir:"ltr",name:"简体中文",flag:"🇨🇳"},{code:"es",language:"es-ES",dir:"ltr",name:"Español",flag:"🇪🇸"},{code:"ja",language:"ja-JP",dir:"ltr",name:"日本語",flag:"🇯🇵"},{code:"fr",language:"fr-FR",dir:"ltr",name:"Français",flag:"🇫🇷"},{code:"de",language:"de-DE",dir:"ltr",name:"Deutsch",flag:"🇩🇪"},{code:"ru",language:"ru-RU",dir:"ltr",name:"Русский",flag:"🇷🇺"},{code:"pt",language:"pt-PT",dir:"ltr",name:"Português",flag:"🇧🇷"},{code:"ko",language:"ko-KR",dir:"ltr",name:"한국어",flag:"🇰🇷"}],detectBrowserLanguage:false,experimental:{localeDetector:"",typedPages:true,typedOptionsAndMessages:false,alternateLinkCanonicalQueries:true,devCache:false,cacheLifetime:"",stripMessagesPayload:false,preload:false,strictSeo:false,nitroContextDetection:true,httpCacheDuration:10,compactRoutes:false},domainLocales:{en:{domain:""},zh:{domain:""},es:{domain:""},ja:{domain:""},fr:{domain:""},de:{domain:""},ru:{domain:""},pt:{domain:""},ko:{domain:""}}}},app:{baseURL:"/",buildId:"4ed28888-15f2-4321-abe5-844ba0f776c4",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script> <script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":877,"once":1155,"_errors":1156,"serverRendered":81,"path":1158},["ShallowReactive",3],{"tutorialDetail:html-create-basic-html-structure-and-tags-451029:ru":4,"footerData_ru":126,"skillTreeListData:basic:ru":344,"skillTreeDetailData:html:ru":470,"tutorialRecommendCourseListData:html-create-basic-html-structure-and-tags-451029:ru":869},{"tutorial":5,"steps":96,"skilltrees":124},{"id":6,"name":7,"fee_type":8,"type":9,"difficulty":10,"time":11,"from_community":12,"max_lab_num":13,"allow_to_start":12,"remain_num":9,"allow_to_view":12,"skills":14,"hidden":12,"path":78,"alias":79,"icon":80,"show_in_tutorial":81,"description":82,"default_console_type":83,"meta_title":7,"meta_description":82,"meta_keywords":84,"skilltree_alias":20,"practice_url":22,"langs":85,"ai_verify":12,"repo_full_name":95},451029,"Создание базовой структуры и тегов HTML",2,0,"Beginner",25,false,-1,[15,27,33,39,45,51,60,69],{"key":16,"name":17,"desc":18,"project":19,"group":23},"html\u002Fbasic_elems","Basic Elements","Basic HTML elements such as \u003Chtml>, \u003Chead>, \u003Ctitle>, and \u003Cbody> are essential components of any HTML document, providing the overall structure and content.",{"key":20,"name":21,"desc":22},"html","HTML","",{"key":24,"name":25,"desc":26},"html\u002FBasicStructureGroup","Basic Structure","Basic Structure covers the fundamental elements and declarations necessary for creating the basic structure of an HTML document. It includes basic elements, head elements, character encoding, language declaration, and viewport declaration.",{"key":28,"name":29,"desc":30,"project":31,"group":32},"html\u002Fhead_elems","Head Elements","Head elements like \u003Cmeta>, \u003Clink>, and \u003Cscript> are used to define metadata, link external resources, and include scripts in the document's head section.",{"key":20,"name":21,"desc":22},{"key":24,"name":25,"desc":26},{"key":34,"name":35,"desc":36,"project":37,"group":38},"html\u002Fcharset","Character Encoding","Character encoding, specified with \u003Cmeta charset>, determines how characters are represented in the document, ensuring proper text rendering.",{"key":20,"name":21,"desc":22},{"key":24,"name":25,"desc":26},{"key":40,"name":41,"desc":42,"project":43,"group":44},"html\u002Flang_decl","Language Declaration","The \u003Chtml> tag's 'lang' attribute declares the language of the document, aiding in accessibility and proper rendering for different languages.",{"key":20,"name":21,"desc":22},{"key":24,"name":25,"desc":26},{"key":46,"name":47,"desc":48,"project":49,"group":50},"html\u002Fviewport","Viewport Declaration","Viewport declarations using the \u003Cmeta viewport> tag help control how the web page is displayed on various devices, enhancing responsiveness.",{"key":20,"name":21,"desc":22},{"key":24,"name":25,"desc":26},{"key":52,"name":53,"desc":54,"project":55,"group":56},"html\u002Ftext_head","Text and Headings","HTML provides tags like \u003Cp>, \u003Ch1> to \u003Ch6>, and \u003Cspan> for organizing and formatting text, including headings of various levels.",{"key":20,"name":21,"desc":22},{"key":57,"name":58,"desc":59},"html\u002FTextContentandFormattingGroup","Text Content and Formatting","Text Content and Formatting focuses on working with text content, headings, paragraphs, lists, quotations, and text direction in HTML documents.",{"key":61,"name":62,"desc":63,"project":64,"group":65},"html\u002Fdoc_flow","Document Flow Understanding","Understanding the natural document flow and display properties of HTML elements is essential for creating cohesive and responsive layouts.",{"key":20,"name":21,"desc":22},{"key":66,"name":67,"desc":68},"html\u002FLayoutandSectioningGroup","Layout and Sectioning","Layout and Sectioning focuses on layout-related HTML elements, navigation, document flow, and considerations for effective web page structure.",{"key":70,"name":71,"desc":72,"project":73,"group":74},"html\u002Finter_elems","Interactive and Dynamic Elements","Interactive and dynamic elements, such as \u003Ciframe>, \u003Caudio>, \u003Cvideo>, and \u003Ccanvas>, enable the creation of engaging and interactive web content that responds to user actions.",{"key":20,"name":21,"desc":22},{"key":75,"name":76,"desc":77},"html\u002FAdvancedElementsGroup","Advanced Elements","Advanced Elements covers advanced HTML elements and features, including custom data attributes, accessibility considerations, and HTML templating.","web\u002Flab-create-basic-html-structure-and-tags","html-create-basic-html-structure-and-tags-451029","https:\u002F\u002Ficons.labex.io\u002Fcreate-basic-html-structure-and-tags.png",true,"Узнайте, как создать базовую структуру HTML-документа, понять основные HTML-теги и построить базовую веб-страницу с правильной семантической разметкой.",4,"HTML, веб-разработка, HTML-теги, структура документа, DOCTYPE, мета-теги, HTML5",[86,87,88,89,90,91,92,93,94],"zh","es","fr","de","ja","ru","ko","pt","en","labex-labs\u002Flabs",[97,101,106,109,113,116,120],{"position":9,"title":98,"layout":99,"text":100,"need_verify":12,"has_solution":12},"Введение","doc-fullscreen","## Введение\n\nВ этом практическом занятии (лабораторной работе) студенты научатся основным навыкам создания базовой структуры HTML-документа и понимания важных HTML-тегов. Практическое занятие (лабораторная работа) проводит участников по этапам настройки HTML-документа с правильным объявлением DOCTYPE, добавлению корневого тега HTML, настройке раздела head и изучению различных типов HTML-тегов.\n\nУчастники начнут с создания HTML5-документа, узнав, как объявить тип документа, структурировать базовый макет страницы и понять назначение ключевых элементов, таких как `\u003Chtml>`, `\u003Chead>` и `\u003Cbody>`. К концу практического занятия (лабораторной работы) студенты получат всестороннее понимание того, как создать корректно сформированный HTML-документ и использовать различные HTML-теги для структурирования содержимого веб-страницы.\n",{"position":102,"title":103,"layout":104,"text":105,"need_verify":81,"has_solution":12},1,"Настройка HTML-документа с объявлением DOCTYPE","doc-workbench-split","## Настройка HTML-документа с объявлением DOCTYPE\n\nНа этом этапе вы узнаете, как создать базовую структуру HTML-документа, добавив объявление DOCTYPE. Объявление DOCTYPE является важным, так как оно сообщает веб-браузерам, какую версию HTML вы используете в документе, обеспечивая правильное отображение и совместимость.\n\nСначала откройте WebIDE и создайте новый файл с именем `index.html` в директории `~\u002Fproject`.\n\nОбъявление DOCTYPE для HTML5 простое и понятное. Вы добавите его в качестве первой строки своего HTML-документа:\n\n```html\n\u003C!doctype html>\n```\n\nЭто объявление сообщает браузерам, что вы используете HTML5, последнюю версию HTML. Регистр букв не имеет значения, но для единообразия и читаемости рекомендуется использовать строчные буквы.\n\nДавайте создадим полную базовую структуру HTML-документа с объявлением DOCTYPE:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Ctitle>My First HTML Page\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Ch1>Welcome to HTML!\u003C\u002Fh1>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n![Структура HTML-документа](https:\u002F\u002Ffile.labex.io\u002Fnamespace\u002Fdf87b950-1f37-4316-bc07-6537a1f2c481\u002Fweb\u002Flab-create-basic-html-structure-and-tags\u002Fru\u002F..\u002Fassets\u002F20250110-10-11-33-jardiBc9.png)\n\n> Примечание: Узнайте больше о [Просмотре HTML-файлов в WebIDE](https:\u002F\u002Fsupport.labex.io\u002Fen\u002Flabex-vm\u002Fwebide#preview-html).\n\nПример вывода в браузере будет выглядеть так:\n\n```\nWelcome to HTML!\n```\n\nОсновные моменты, которые необходимо запомнить:\n\n- Объявление DOCTYPE должно быть первой строкой в вашем HTML-документе.\n- Оно помогает браузерам понять, какую версию HTML вы используете.\n- Для современной веб-разработки используйте `\u003C!DOCTYPE html>` для HTML5.\n- Объявление не является HTML-тегом; это инструкция для браузера.\n",{"position":8,"title":107,"layout":104,"text":108,"need_verify":81,"has_solution":12},"Добавление корневого тега HTML и базовой структуры","## Добавление корневого тега HTML и базовой структуры\n\nНа этом этапе вы узнаете о фундаментальной структуре HTML-документа, сконцентрировавшись на корневом теге HTML и базовой структуре документа. Тег `\u003Chtml>` является контейнером для всех других HTML-элементов и служит корневым элементом HTML-страницы.\n\nОткройте файл `index.html`, который вы создали на предыдущем этапе, в WebIDE. Давайте расширим предыдущую структуру HTML, добавив полный корневой тег и его важные компоненты:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Ctitle>My First HTML Page\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Ch1>Welcome to HTML Structure\u003C\u002Fh1>\n \u003Cp>This is the basic structure of an HTML document.\u003C\u002Fp>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\nРазберем основные компоненты:\n\n1. Тег `\u003Chtml>`: Корневой элемент, который заключает все остальное HTML-содержимое.\n2. Атрибут `lang=\"en\"`: Указывает язык документа (в данном случае - английский).\n3. Два основных дочерних элемента:\n - `\u003Chead>`: Содержит метаданные о документе.\n - `\u003Cbody>`: Содержит видимое содержимое веб-страницы.\n\nПример вывода в веб-браузере будет выглядеть так:\n\n```\nWelcome to HTML Structure\nThis is the basic structure of an HTML document.\n```\n\nОсновные моменты, которые необходимо запомнить:\n\n- Каждый HTML-документ должен иметь корневой тег `\u003Chtml>`.\n- Атрибут `lang` помогает в обеспечении доступности и оптимизации для поисковых систем.\n- Документ разделен на секции `\u003Chead>` и `\u003Cbody>`.\n- Правильное вложение тегов является важным для валидного HTML.\n",{"position":110,"title":111,"layout":104,"text":112,"need_verify":81,"has_solution":12},3,"Настройка раздела \u003Chead> с использованием мета-тегов и тега \u003Ctitle>","## Настройка раздела \u003Chead> с использованием мета-тегов и тега \u003Ctitle>\n\nНа этом этапе вы узнаете о разделе `\u003Chead>` HTML-документа и о том, как использовать мета-теги и тег title для предоставления важной информации о вашей веб-странице.\n\nОткройте файл `index.html` в WebIDE и обновите раздел `\u003Chead>` с помощью следующего примера:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n \u003Cmeta name=\"description\" content=\"A simple HTML learning page\" \u002F>\n \u003Ctitle>My HTML Learning Journey\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Ch1>Welcome to HTML Metadata\u003C\u002Fh1>\n \u003Cp>This page demonstrates head section configuration.\u003C\u002Fp>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\nРазберем основные мета-теги и их назначения:\n\n1. `\u003Cmeta charset=\"UTF-8\">`: Указывает кодировку символов для документа.\n2. `\u003Cmeta name=\"viewport\">`: Гарантирует правильное отображение на различных устройствах.\n3. `\u003Cmeta name=\"description\">`: Предоставляет краткое описание страницы для поисковых систем.\n4. `\u003Ctitle>`: Устанавливает заголовок страницы, отображаемый во вкладке браузера.\n\nПример вывода во вкладке браузера:\n\n```\nMy HTML Learning Journey\n```\n\nОсновные моменты, которые необходимо запомнить:\n\n- Раздел `\u003Chead>` содержит метаданные о HTML-документе.\n- Мета-теги предоставляют дополнительную информацию для браузеров и поисковых систем.\n- Тег `\u003Ctitle>` важен для идентификации страницы и SEO (поисковая оптимизация).\n- Всегда включайте мета-теги кодировки символов и viewport.\n",{"position":83,"title":114,"layout":104,"text":115,"need_verify":81,"has_solution":12},"Понимание одиночных и двойных HTML-тегов","## Понимание одиночных и двойных HTML-тегов\n\nНа этом этапе вы узнаете о двух типах HTML-тегов: одиночных (самозакрывающихся) тегах и двойных тегах. Понимание различий между этими тегами является важным для создания хорошо структурированных HTML-документов.\n\nОткройте файл `index.html` в WebIDE и обновите раздел body с помощью следующего примера:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Ctitle>HTML Tags Exploration\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003C!-- Double Tags (Opening and Closing) -->\n \u003Ch1>Welcome to HTML Tags\u003C\u002Fh1>\n \u003Cp>This is a paragraph with \u003Cstrong>bold text\u003C\u002Fstrong>.\u003C\u002Fp>\n\n \u003C!-- Single (Self-Closing) Tags -->\n \u003Cimg src=\"example.jpg\" alt=\"Example Image\" \u002F>\n \u003Cbr \u002F>\n \u003Cinput type=\"text\" placeholder=\"Enter your name\" \u002F>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\nРазберем разные типы тегов:\n\nДвойные теги (парные теги):\n\n- Имеют открывающий тег `\u003Ctag>` и закрывающий тег `\u003C\u002Ftag>`.\n- Содержимое помещается между открывающим и закрывающим тегами.\n- Примеры: `\u003Ch1>`, `\u003Cp>`, `\u003Cstrong>`, `\u003Cdiv>`.\n\nОдиночные теги (самозакрывающиеся теги):\n\n- Не имеют отдельного закрывающего тега.\n- Закрываются сами внутри тега.\n- Примеры: `\u003Cimg>`, `\u003Cbr>`, `\u003Cinput>`.\n\nПример вывода в браузере будет выглядеть так:\n\n```\nWelcome to HTML Tags\nThis is a paragraph with bold text.\n[Здесь должна быть отображена картинка]\n[Здесь должен быть показано текстовое поле ввода]\n```\n\n![Пример вывода HTML-тегов](https:\u002F\u002Ffile.labex.io\u002Fnamespace\u002Fdf87b950-1f37-4316-bc07-6537a1f2c481\u002Fweb\u002Flab-create-basic-html-structure-and-tags\u002Fru\u002F..\u002Fassets\u002F20250110-10-53-27-6sPaawNK.png)\n\nОсновные моменты, которые необходимо запомнить:\n\n- Двойные теги заключают содержимое и требуют как открывающего, так и закрывающего тегов.\n- Одиночные теги являются самодостаточными и не заключают содержимое.\n- Всегда закрывайте двойные теги, чтобы сохранить правильную структуру HTML.\n- Некоторые одиночные теги могут иметь атрибуты для предоставления дополнительной информации.\n",{"position":117,"title":118,"layout":104,"text":119,"need_verify":81,"has_solution":12},5,"Исследование тега \u003Cbody> и размещения содержимого страницы","## Исследование тега \u003Cbody> и размещения содержимого страницы\n\nНа этом этапе вы узнаете о теге `\u003Cbody>` и о том, как структурировать контент в HTML-документе. Тег body - это место, где размещается все видимое содержимое веб-страницы.\n\nОткройте файл `index.html` в WebIDE и обновите раздел body с помощью следующего примера:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" \u002F>\n \u003Ctitle>Content Placement Example\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003C!-- Headings -->\n \u003Ch1>Welcome to HTML Content Placement\u003C\u002Fh1>\n \u003Ch2>Subheading Level 2\u003C\u002Fh2>\n \u003Ch3>Subheading Level 3\u003C\u002Fh3>\n\n \u003C!-- Paragraphs -->\n \u003Cp>This is a paragraph explaining the importance of content structure.\u003C\u002Fp>\n\n \u003C!-- Lists -->\n \u003Ch4>Key HTML Elements:\u003C\u002Fh4>\n \u003Cul>\n \u003Cli>Headings\u003C\u002Fli>\n \u003Cli>Paragraphs\u003C\u002Fli>\n \u003Cli>Lists\u003C\u002Fli>\n \u003C\u002Ful>\n\n \u003C!-- Div for grouping content -->\n \u003Cdiv>\n \u003Cp>This paragraph is inside a div container.\u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003C!-- Links and Images -->\n \u003Ca href=\"https:\u002F\u002Fexample.com\">Visit Example Website\u003C\u002Fa>\n \u003Cimg src=\"example.jpg\" alt=\"Example Image\" width=\"300\" \u002F>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\nПример вывода в браузере будет выглядеть так:\n\n![Пример вывода размещения контента HTML](https:\u002F\u002Ffile.labex.io\u002Fnamespace\u002Fdf87b950-1f37-4316-bc07-6537a1f2c481\u002Fweb\u002Flab-create-basic-html-structure-and-tags\u002Fru\u002F..\u002Fassets\u002F20250113-15-36-31-2tbySUGL.png)\n\nОсновные моменты, которые необходимо запомнить:\n\n- Тег `\u003Cbody>` содержит все видимое содержимое страницы.\n- Используйте заголовочные теги (`\u003Ch1>` - `\u003Ch6>`), чтобы создать иерархию контента.\n- Абзацы, списки и другие элементы помогают организовать информацию.\n- Тег `\u003Cdiv>` может группировать и структурировать контент.\n- Включайте ссылки и изображения, чтобы повысить интерактивность страницы.\n",{"position":121,"title":122,"layout":99,"text":123,"need_verify":12,"has_solution":12},6,"Резюме","## Резюме\n\nВ этом практическом занятии (лабораторной работе) участники научились основным этапам создания базовой структуры HTML-документа. Процесс начался с настройки объявления DOCTYPE, которое является важным для обеспечения правильного отображения страницы в браузере и совместимости с HTML5. Участники изучили основные HTML-теги, включая корневой тег `\u003Chtml>`, разделы `\u003Chead>` и `\u003Cbody>`, и поняли их конкретные роли в организации документа.\n\nВ рамках практического занятия студенты были приведены к созданию полноценного HTML-документа. Было показано, как добавлять мета-теги, устанавливать кодировку символов, определять заголовок страницы и размещать контент внутри тега body. Участники получили практический опыт в создании хорошо структурированной HTML-страницы, изучив ключевые концепции, такие как одиночные и двойные HTML-теги, правильное вложение тегов и важность семантической разметки в веб-разработке.\n",[125],{"name":21,"alias":20},{"groups":127},[128,182,236,290],{"name":129,"items":130},"ПРАКТИЧЕСКИЕ КУРСЫ",[131,134,137,140,143,146,149,152,155,158,161,164,167,170,173,176,179],{"name":132,"url":133},"Изучить Linux","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Flinux",{"name":135,"url":136},"Изучить Python","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fpython",{"name":138,"url":139},"Изучить кибербезопасность","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fcybersecurity",{"name":141,"url":142},"Изучить Docker","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fdocker",{"name":144,"url":145},"Изучить CompTIA","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fcomptia",{"name":147,"url":148},"Изучить Java","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fjava",{"name":150,"url":151},"Изучить Data Science","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fdata-science",{"name":153,"url":154},"Изучить Git","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fgit",{"name":156,"url":157},"Изучить Kubernetes","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fkubernetes",{"name":159,"url":160},"Изучить Kali Linux","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fkali",{"name":162,"url":163},"Изучить Ansible","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fansible",{"name":165,"url":166},"Изучить DevOps","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fdevops",{"name":168,"url":169},"Изучить машинное обучение","https:\u002F\u002Flabex.io\u002Fru\u002Flearn\u002Fml",{"name":171,"url":172},"Практический экзамен RHCSA","https:\u002F\u002Flabex.io\u002Fru\u002Fcourses\u002Frhcsa-certification-exam-practice-exercises",{"name":174,"url":175},"CompTIA Linux+","https:\u002F\u002Flabex.io\u002Fru\u002Fcourses\u002Fcomptia-linux-plus-training-labs",{"name":177,"url":178},"Упражнения по Python","https:\u002F\u002Flabex.io\u002Fru\u002Fexercises\u002Fpython",{"name":180,"url":181},"Шпаргалка по командам Linux","https:\u002F\u002Flinux-commands.labex.io\u002F",{"name":183,"items":184},"ПРАКТИЧЕСКИЕ ЛАБОРАТОРИИ",[185,188,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233],{"name":186,"url":187},"Проекты Linux","https:\u002F\u002Flabex.io\u002Fru\u002Fprojects\u002Fcategory\u002Flinux",{"name":189,"url":190},"Проекты Python","https:\u002F\u002Flabex.io\u002Fru\u002Fprojects\u002Fcategory\u002Fpython",{"name":192,"url":193},"Проекты Java","https:\u002F\u002Flabex.io\u002Fru\u002Fprojects\u002Fcategory\u002Fjava",{"name":195,"url":196},"Проекты на C","https:\u002F\u002Flabex.io\u002Fru\u002Fprojects\u002Fcategory\u002Fc",{"name":198,"url":199},"Проекты DevOps","https:\u002F\u002Flabex.io\u002Fru\u002Fprojects\u002Fcategory\u002Fdevops",{"name":201,"url":202},"Проекты Golang","https:\u002F\u002Flabex.io\u002Fru\u002Fprojects\u002Fcategory\u002Fgo",{"name":204,"url":205},"Практика Git","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fgit",{"name":207,"url":208},"Практика Shell","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fshell",{"name":210,"url":211},"Практика Java","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fjava",{"name":213,"url":214},"Практика Docker","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fdocker",{"name":216,"url":217},"Практика MySQL","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fmysql",{"name":219,"url":220},"Практика MongoDB","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fmongodb",{"name":222,"url":223},"Практика Kubernetes","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fkubernetes",{"name":225,"url":226},"Практика машинного обучения","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fml",{"name":228,"url":229},"Практика кибербезопасности","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fcybersecurity",{"name":231,"url":232},"Практика Nmap","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fnmap",{"name":234,"url":235},"Практика Wireshark","https:\u002F\u002Flabex.io\u002Fru\u002Ffree-labs\u002Fwireshark",{"name":237,"items":238},"ИГРОВЫЕ ПЛОЩАДКИ",[239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287],{"name":240,"url":241},"Онлайн-терминал Linux","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Flinux-online-linux-terminal-and-playground-372915",{"name":243,"url":244},"Песочница Docker","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fdocker-online-docker-playground-372912",{"name":246,"url":247},"Песочница Kubernetes","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fkubernetes-online-kubernetes-playground-593609",{"name":249,"url":250},"Песочница Python","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fpython-online-python-playground-372886",{"name":252,"url":253},"Песочница Golang","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fgo-online-golang-playground-372913",{"name":255,"url":256},"Онлайн-компилятор C++","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcpp-online-c-playground-372911",{"name":258,"url":259},"Песочница Ansible","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fansible-online-ansible-playground-415831",{"name":261,"url":262},"Песочница Jenkins","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fjenkins-online-jenkins-playground-415838",{"name":264,"url":265},"Песочница Java","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fjava-online-java-playground-372914",{"name":267,"url":268},"Песочница Rust","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Frust-online-rust-playground-372918",{"name":270,"url":271},"Kali Linux Онлайн","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fkali-online-kali-linux-terminal-and-playground-592935",{"name":273,"url":274},"Nmap Онлайн","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fnmap-online-nmap-playground-593613",{"name":276,"url":277},"Wireshark Онлайн","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fwireshark-online-wireshark-playground-593624",{"name":279,"url":280},"MySQL Онлайн","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fmysql-online-mysql-playground-372916",{"name":282,"url":283},"PostgreSQL Онлайн","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fkali-online-postgresql-database-playground-593616",{"name":285,"url":286},"Симулятор экзамена RHCSA","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Frhel-online-rhel-terminal-rhcsa-and-rhce-exam-playground-592933",{"name":288,"url":289},"Лучший дистрибутив Linux","https:\u002F\u002Flabex.io\u002Fru\u002Flesson\u002Fchoosing-a-linux-distribution",{"name":291,"items":292},"УЧЕБНЫЕ МАТЕРИАЛЫ",[293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341],{"name":294,"url":295},"Учебник по Linux","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcategory\u002Flinux",{"name":297,"url":298},"Учебник по Docker","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcategory\u002Fdocker",{"name":300,"url":301},"Учебник по Kubernetes","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcategory\u002Fkubernetes",{"name":303,"url":304},"Учебник по MongoDB","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcategory\u002Fmongodb",{"name":306,"url":307},"Учебник по PostgreSQL","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcategory\u002Fpostgresql",{"name":309,"url":310},"Учебник по Wireshark","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcategory\u002Fwireshark",{"name":312,"url":313},"Учебник по DevOps","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcategory\u002Fdevops",{"name":315,"url":316},"Учебник по кибербезопасности","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcategory\u002Fcybersecurity",{"name":318,"url":319},"Вопросы для собеседования по Java","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fjava-java-interview-questions-and-answers-593685",{"name":321,"url":322},"Вопросы для собеседования по Python","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fpython-python-interview-questions-and-answers-593698",{"name":324,"url":325},"Вопросы для собеседования по Kubernetes","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fkubernetes-kubernetes-interview-questions-and-answers-593688",{"name":327,"url":328},"Вопросы для собеседования по DevOps","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Flinux-devops-interview-questions-and-answers-593679",{"name":330,"url":331},"Вопросы для собеседования по кибербезопасности","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fcybersecurity-cybersecurity-interview-questions-and-answers-593676",{"name":333,"url":334},"Вопросы для собеседования по Docker","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fdocker-docker-interview-questions-and-answers-593680",{"name":336,"url":337},"Вопросы для собеседования по Linux","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Flinux-linux-interview-questions-and-answers-593689",{"name":339,"url":340},"Вопросы для собеседования по MongoDB","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Fmongodb-mongodb-interview-questions-and-answers-593692",{"name":342,"url":343},"Вопросы для собеседования по базам данных","https:\u002F\u002Flabex.io\u002Fru\u002Ftutorials\u002Flinux-database-interview-questions-and-answers-593677",{"paths":345},[346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,461,464,467],{"alias":347,"name":348},"linux","Linux",{"alias":350,"name":351},"devops","DevOps",{"alias":353,"name":354},"cybersecurity","Кибербезопасность",{"alias":356,"name":357},"kali","Kali Linux",{"alias":359,"name":360},"devops-engineer","DevOps Engineer",{"alias":362,"name":363},"cybersecurity-engineer","Cybersecurity Engineer",{"alias":365,"name":366},"database","База данных",{"alias":368,"name":369},"datascience","Наука о данных",{"alias":371,"name":372},"rhel","Red Hat Enterprise Linux",{"alias":374,"name":375},"comptia","CompTIA",{"alias":377,"name":378},"docker","Docker",{"alias":380,"name":381},"ckad","Обучение CKAD",{"alias":383,"name":384},"cka","Обучение CKA",{"alias":386,"name":387},"kubernetes","Kubernetes",{"alias":389,"name":390},"devsecops","DevSecOps",{"alias":392,"name":393},"lfcs","Обучение LFCS",{"alias":395,"name":396},"python","Python",{"alias":398,"name":399},"git","Git",{"alias":401,"name":402},"shell","Shell",{"alias":404,"name":405},"nmap","Nmap",{"alias":407,"name":408},"wireshark","Wireshark",{"alias":410,"name":411},"hydra","Hydra",{"alias":413,"name":414},"java","Java",{"alias":416,"name":417},"sqlite","SQLite",{"alias":419,"name":420},"postgresql","PostgreSQL",{"alias":422,"name":423},"mysql","MySQL",{"alias":425,"name":426},"redis","Redis",{"alias":428,"name":429},"mongodb","MongoDB",{"alias":431,"name":432},"go","Golang",{"alias":434,"name":435},"cpp","C++",{"alias":437,"name":438},"c","C",{"alias":440,"name":441},"jenkins","Jenkins",{"alias":443,"name":444},"ansible","Ansible",{"alias":446,"name":447},"pandas","Pandas",{"alias":449,"name":450},"numpy","NumPy",{"alias":452,"name":453},"sklearn","scikit-learn",{"alias":455,"name":456},"matplotlib","Matplotlib",{"alias":458,"name":459},"webdev","Веб-разработка",{"alias":20,"name":21},{"alias":462,"name":463},"css","CSS",{"alias":465,"name":466},"javascript","JavaScript",{"alias":468,"name":469},"react","React",{"path":471,"team":868},{"id":472,"alias":20,"name":21,"img_url":473,"course_count":102,"hours":474,"enable_uid":12,"skills_count":475,"is_online":81,"is_followed":12,"has_cert":81,"cert_threshold":476,"skilltree":20,"project_count":477,"category":22,"followers_count":478,"tags":479,"url":22,"description":480,"icon":22,"authors":481,"labs_count":117,"levels":482,"learned_skills_count":9,"is_path_group":12,"groups":851,"meta_title":852,"meta_description":853,"meta_keywords":854,"parent_paths":855,"langs":866,"first_lab_alias":867,"first_course_alias":488},52,"https:\u002F\u002Ffile.labex.io\u002Fupload\u002Fu\u002F1991\u002FeGCPCGgBJ3WY.png",30,28,8000,57,13347,[],"Изучите HTML, краеугольный камень веб-разработки, с помощью этого всеобъемлющего учебного курса. Разработанный для начинающих, этот план предоставляет структурированный подход к освоению HTML. Интерактивные курсы HTML охватывают структуру документа, теги и семантическую разметку. Получите реальный опыт, выполняя практические упражнения без видео в динамичной HTML-песочнице для создания хорошо структурированных веб-страниц.",[],[483,494],{"level":102,"name":484,"courses":485},"courses",[486],{"id":487,"alias":488,"name":489,"cover":490,"user_count":491,"level":102,"fee_type":9,"lab_coins":9,"tags":492,"type":9,"status":102,"has_cert":81,"hidden":12},9428,"html-for-beginners","HTML для начинающих","https:\u002F\u002Fcourse-cover.labex.io\u002Fhtml-for-beginners.png?lang=ru",4305,[20,493],"web-development",{"level":8,"name":495,"courses":496},"projects",[497,504,511,518,525,532,539,546,552,558,564,570,577,583,589,595,601,607,613,619,626,632,638,645,652,658,664,670,676,682,688,694,700,706,712,718,724,730,736,742,748,754,761,767,773,779,785,791,797,803,809,815,821,827,833,839,845],{"id":498,"alias":499,"name":500,"cover":501,"user_count":502,"level":102,"fee_type":9,"lab_coins":9,"tags":503,"type":110,"status":102,"has_cert":81,"hidden":12},1823,"project-build-a-tic-tac-toe-web-app","Создание веб-приложения для игры в крестики-нолики","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-tic-tac-toe-web-app.png?lang=ru",166,[465,493],{"id":505,"alias":506,"name":507,"cover":508,"user_count":509,"level":102,"fee_type":9,"lab_coins":9,"tags":510,"type":110,"status":102,"has_cert":81,"hidden":12},1827,"project-creating-a-whack-a-mole-web-game","Создание веб-игры «Бей-кабанчика»","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-a-whack-a-mole-web-game.png?lang=ru",45,[465,493],{"id":512,"alias":513,"name":514,"cover":515,"user_count":516,"level":102,"fee_type":9,"lab_coins":9,"tags":517,"type":110,"status":102,"has_cert":81,"hidden":12},2117,"project-create-a-notes-app-using-react","Создание приложения для заметок с использованием React","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-create-a-notes-app-using-react.png?lang=ru",72,[468,465,493],{"id":519,"alias":520,"name":521,"cover":522,"user_count":523,"level":102,"fee_type":9,"lab_coins":9,"tags":524,"type":110,"status":102,"has_cert":81,"hidden":12},2120,"project-building-a-expense-splitter-web-app","Создание современного веб - приложения для разделения расходов","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-building-a-expense-splitter-web-app.png?lang=ru",17,[465,493],{"id":526,"alias":527,"name":528,"cover":529,"user_count":530,"level":102,"fee_type":9,"lab_coins":9,"tags":531,"type":110,"status":102,"has_cert":81,"hidden":12},2121,"project-creating-a-drawing-board-web-app","Создание веб-приложения для рисования","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-a-drawing-board-web-app.png?lang=ru",12,[465,493],{"id":533,"alias":534,"name":535,"cover":536,"user_count":537,"level":102,"fee_type":9,"lab_coins":9,"tags":538,"type":110,"status":102,"has_cert":81,"hidden":12},2126,"project-creating-a-task-timer-web-app","Создание веб-приложения таймера задач","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-a-task-timer-web-app.png?lang=ru",21,[465,493],{"id":540,"alias":541,"name":542,"cover":543,"user_count":544,"level":102,"fee_type":9,"lab_coins":9,"tags":545,"type":110,"status":102,"has_cert":81,"hidden":12},2152,"project-create-a-swiper-carousel-web-app","Создание веб-приложения с каруселью Swiper","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-create-a-swiper-carousel-web-app.png?lang=ru",9,[465,493],{"id":547,"alias":548,"name":549,"cover":550,"user_count":8,"level":102,"fee_type":9,"lab_coins":9,"tags":551,"type":110,"status":102,"has_cert":81,"hidden":12},2205,"project-monty-hall-problem-simulation-web-app","Веб-приложение для моделирования задачи Монти Холла","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-monty-hall-problem-simulation-web-app.png?lang=ru",[465,493],{"id":553,"alias":554,"name":555,"cover":556,"user_count":117,"level":8,"fee_type":9,"lab_coins":9,"tags":557,"type":110,"status":102,"has_cert":81,"hidden":12},2217,"project-building-a-web-avoiding-block-game","Создание веб-игры \"Избегание блоков\"","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-building-a-web-avoiding-block-game.png?lang=ru",[465,493],{"id":559,"alias":560,"name":561,"cover":562,"user_count":117,"level":102,"fee_type":9,"lab_coins":9,"tags":563,"type":110,"status":102,"has_cert":81,"hidden":12},2243,"project-2048-web-game-using-jquery","Веб-игра 2048 с использованием jQuery","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-2048-web-game-using-jquery.png?lang=ru",[465,493],{"id":565,"alias":566,"name":567,"cover":568,"user_count":523,"level":102,"fee_type":9,"lab_coins":9,"tags":569,"type":110,"status":102,"has_cert":81,"hidden":12},2250,"project-developing-a-simple-online-chat-room-using-flask","Разработка простой онлайн-чат-комнаты с использованием Flask","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-developing-a-simple-online-chat-room-using-flask.png?lang=ru",[395,493],{"id":571,"alias":572,"name":573,"cover":574,"user_count":575,"level":102,"fee_type":9,"lab_coins":9,"tags":576,"type":110,"status":102,"has_cert":81,"hidden":12},2260,"project-build-a-sliding-puzzle-game-with-javascript","Создание игры \"Слайдинг - пазл\" с использованием JavaScript","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-sliding-puzzle-game-with-javascript.png?lang=ru",8,[465,493],{"id":578,"alias":579,"name":580,"cover":581,"user_count":117,"level":102,"fee_type":9,"lab_coins":9,"tags":582,"type":110,"status":102,"has_cert":81,"hidden":12},2261,"project-create-a-pixel-art-animator-with-react","Создание аниматора пиксель-арта с использованием React","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-create-a-pixel-art-animator-with-react.png?lang=ru",[468,465,493],{"id":584,"alias":585,"name":586,"cover":587,"user_count":83,"level":102,"fee_type":9,"lab_coins":9,"tags":588,"type":110,"status":102,"has_cert":81,"hidden":12},2262,"project-jquery-flip-puzzle-game","Игра в головоломку jQuery Flip","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-jquery-flip-puzzle-game.png?lang=ru",[465,493],{"id":590,"alias":591,"name":592,"cover":593,"user_count":117,"level":102,"fee_type":9,"lab_coins":9,"tags":594,"type":110,"status":102,"has_cert":81,"hidden":12},2293,"project-creating-a-minesweeper-game-with-javascript","Создание игры «Сапёр» с использованием JavaScript","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-a-minesweeper-game-with-javascript.png?lang=ru",[465,493],{"id":596,"alias":597,"name":598,"cover":599,"user_count":83,"level":102,"fee_type":9,"lab_coins":9,"tags":600,"type":110,"status":102,"has_cert":81,"hidden":12},2320,"project-build-a-simple-markdown-editor-with-live-preview","Создание простого Markdown-редактора с живым предварительным просмотром","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-simple-markdown-editor-with-live-preview.png?lang=ru",[465,493],{"id":602,"alias":603,"name":604,"cover":605,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":606,"type":110,"status":102,"has_cert":81,"hidden":12},2321,"project-implement-a-magnifying-glass-effect-using-canvas","Реализация эффекта увеличительного стекла с использованием Canvas","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-implement-a-magnifying-glass-effect-using-canvas.png?lang=ru",[465,493],{"id":608,"alias":609,"name":610,"cover":611,"user_count":9,"level":102,"fee_type":9,"lab_coins":9,"tags":612,"type":110,"status":102,"has_cert":81,"hidden":12},2363,"project-build-an-image-cropping-tool-using-html5","Создание инструмента для обрезки изображений с использованием HTML5","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-an-image-cropping-tool-using-html5.png?lang=ru",[465,493],{"id":614,"alias":615,"name":616,"cover":617,"user_count":11,"level":8,"fee_type":9,"lab_coins":9,"tags":618,"type":110,"status":102,"has_cert":81,"hidden":12},2826,"project-building-a-christmas-wish-list-builder-in-react","Создание конструктора списка желаний на Рождество с использованием React","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-building-a-christmas-wish-list-builder-in-react.png?lang=ru",[468,465,493],{"id":620,"alias":621,"name":622,"cover":623,"user_count":530,"level":102,"fee_type":9,"lab_coins":9,"tags":624,"type":110,"status":102,"has_cert":81,"hidden":12},4544,"project-deploying-mobilenet-with-tensorflowjs-and-flask","Развертывание MobileNet с использованием TensorFlow.js и Flask","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-deploying-mobilenet-with-tensorflowjs-and-flask.png?lang=ru",[395,625],"data-science",{"id":627,"alias":628,"name":629,"cover":630,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":631,"type":110,"status":102,"has_cert":81,"hidden":12},4573,"project-dont-step-on-the-white-tile","Не наступайте на белые плитки","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-dont-step-on-the-white-tile.png?lang=ru",[465,493],{"id":633,"alias":634,"name":635,"cover":636,"user_count":110,"level":102,"fee_type":9,"lab_coins":9,"tags":637,"type":110,"status":102,"has_cert":81,"hidden":12},4574,"project-scratch-card-game","Создание веб-игры \"Скретч-карта\"","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-scratch-card-game.png?lang=ru",[465,493],{"id":639,"alias":640,"name":641,"cover":642,"user_count":643,"level":110,"fee_type":9,"lab_coins":9,"tags":644,"type":110,"status":102,"has_cert":81,"hidden":12},4719,"project-build-a-simple-url-shortener-with-flask-and-mysql","Создание простого сокращателя ссылок с использованием Flask и MySQL","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-simple-url-shortener-with-flask-and-mysql.png?lang=ru",31,[465,493],{"id":646,"alias":647,"name":648,"cover":649,"user_count":650,"level":102,"fee_type":9,"lab_coins":9,"tags":651,"type":110,"status":102,"has_cert":81,"hidden":12},4871,"project-build-a-web-based-tcp-port-scanner","Создание веб-приложения для сканирования TCP-портов","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-web-based-tcp-port-scanner.png?lang=ru",13,[353,404,347],{"id":653,"alias":654,"name":655,"cover":656,"user_count":83,"level":102,"fee_type":9,"lab_coins":9,"tags":657,"type":110,"status":102,"has_cert":81,"hidden":12},5455,"project-do-a-search","Разработка поискового функционала на Vue.js","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-do-a-search.png?lang=ru",[465,493],{"id":659,"alias":660,"name":661,"cover":662,"user_count":117,"level":102,"fee_type":9,"lab_coins":9,"tags":663,"type":110,"status":102,"has_cert":81,"hidden":12},5456,"project-dynamic-tab-bar","Реализация динамической прикрепляемой панели вкладок","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-dynamic-tab-bar.png?lang=ru",[462,493],{"id":665,"alias":666,"name":667,"cover":668,"user_count":8,"level":102,"fee_type":9,"lab_coins":9,"tags":669,"type":110,"status":102,"has_cert":81,"hidden":12},5459,"project-a-good-review-for-the-takeout","Хороший обзор по доставке еды","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-a-good-review-for-the-takeout.png?lang=ru",[465,493],{"id":671,"alias":672,"name":673,"cover":674,"user_count":110,"level":102,"fee_type":9,"lab_coins":9,"tags":675,"type":110,"status":102,"has_cert":81,"hidden":12},5460,"project-add-new-address","Веб-приложение для управления адресами","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-add-new-address.png?lang=ru",[465,493],{"id":677,"alias":678,"name":679,"cover":680,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":681,"type":110,"status":102,"has_cert":81,"hidden":12},5467,"project-holiday-greeting-card","Генератор случайных открыток с поздравлениями","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-holiday-greeting-card.png?lang=ru",[465,493],{"id":683,"alias":684,"name":685,"cover":686,"user_count":110,"level":102,"fee_type":9,"lab_coins":9,"tags":687,"type":110,"status":102,"has_cert":81,"hidden":12},5468,"project-movie-ticket-reservation","Система бронирования билетов на кино","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-movie-ticket-reservation.png?lang=ru",[465,493],{"id":689,"alias":690,"name":691,"cover":692,"user_count":8,"level":102,"fee_type":9,"lab_coins":9,"tags":693,"type":110,"status":102,"has_cert":81,"hidden":12},5476,"project-web-ppt","Веб-строитель презентаций HTML","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-web-ppt.png?lang=ru",[465,493],{"id":695,"alias":696,"name":697,"cover":698,"user_count":9,"level":102,"fee_type":9,"lab_coins":9,"tags":699,"type":110,"status":102,"has_cert":81,"hidden":12},5479,"project-fun-shopping","Корзина для покупок на Vue.js с функцией перетаскивания","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-fun-shopping.png?lang=ru",[465,493],{"id":701,"alias":702,"name":703,"cover":704,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":705,"type":110,"status":102,"has_cert":81,"hidden":12},5481,"project-layout-switch","Список продуктов с переключением макета","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-layout-switch.png?lang=ru",[465,493],{"id":707,"alias":708,"name":709,"cover":710,"user_count":9,"level":102,"fee_type":9,"lab_coins":9,"tags":711,"type":110,"status":102,"has_cert":81,"hidden":12},5485,"project-read-it","Создание электронного читалки на Vue.js","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-read-it.png?lang=ru",[465,493],{"id":713,"alias":714,"name":715,"cover":716,"user_count":9,"level":102,"fee_type":9,"lab_coins":9,"tags":717,"type":110,"status":102,"has_cert":81,"hidden":12},5488,"project-switch-business-status","Создание переключателя статуса магазина на Vue.js","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-switch-business-status.png?lang=ru",[465,493],{"id":719,"alias":720,"name":721,"cover":722,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":723,"type":110,"status":102,"has_cert":81,"hidden":12},5537,"project-atomic-css","Реализация атомарного гибкого макета с использованием CSS","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-atomic-css.png?lang=ru",[462,493],{"id":725,"alias":726,"name":727,"cover":728,"user_count":110,"level":102,"fee_type":9,"lab_coins":9,"tags":729,"type":110,"status":102,"has_cert":81,"hidden":12},5538,"project-creating-website-homepage","Создание адаптивной главной страницы новостного сайта","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-website-homepage.png?lang=ru",[462,493],{"id":731,"alias":732,"name":733,"cover":734,"user_count":110,"level":102,"fee_type":9,"lab_coins":9,"tags":735,"type":110,"status":102,"has_cert":81,"hidden":12},5539,"project-creative-billboard","Творческий дизайн билборда с деревянными текстурами","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creative-billboard.png?lang=ru",[462,493],{"id":737,"alias":738,"name":739,"cover":740,"user_count":83,"level":102,"fee_type":9,"lab_coins":9,"tags":741,"type":110,"status":102,"has_cert":81,"hidden":12},5543,"project-fix-website-display","Исправление проблем отображения веб - сайта","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-fix-website-display.png?lang=ru",[462,493],{"id":743,"alias":744,"name":745,"cover":746,"user_count":117,"level":102,"fee_type":9,"lab_coins":9,"tags":747,"type":110,"status":102,"has_cert":81,"hidden":12},5544,"project-flex-dice-layout","Адаптивный макет костей с использованием Flexbox","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-flex-dice-layout.png?lang=ru",[462,493],{"id":749,"alias":750,"name":751,"cover":752,"user_count":110,"level":102,"fee_type":9,"lab_coins":9,"tags":753,"type":110,"status":102,"has_cert":81,"hidden":12},5549,"project-give-your-page-a-makeover","Переосмыслите свой веб - интерфейс","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-give-your-page-a-makeover.png?lang=ru",[462,493],{"id":755,"alias":756,"name":757,"cover":758,"user_count":759,"level":102,"fee_type":9,"lab_coins":9,"tags":760,"type":110,"status":102,"has_cert":81,"hidden":12},5550,"project-labex-knowledge-network","Простой и красивый дизайн домашней страницы","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-labex-knowledge-network.png?lang=ru",15,[462,493],{"id":762,"alias":763,"name":764,"cover":765,"user_count":121,"level":102,"fee_type":9,"lab_coins":9,"tags":766,"type":110,"status":102,"has_cert":81,"hidden":12},5551,"project-movie-theater-seat-arrangement","Расположение мест в кинотеатре","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-movie-theater-seat-arrangement.png?lang=ru",[462,493],{"id":768,"alias":769,"name":770,"cover":771,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":772,"type":110,"status":102,"has_cert":81,"hidden":12},5552,"project-responsive-page-layout","Адаптивный веб-дизайн с использованием Gulp","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-responsive-page-layout.png?lang=ru",[462,493],{"id":774,"alias":775,"name":776,"cover":777,"user_count":117,"level":102,"fee_type":9,"lab_coins":9,"tags":778,"type":110,"status":102,"has_cert":81,"hidden":12},5553,"project-responsive-web-design","Адаптивный веб-дизайн для всех экранов","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-responsive-web-design.png?lang=ru",[462,493],{"id":780,"alias":781,"name":782,"cover":783,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":784,"type":110,"status":102,"has_cert":81,"hidden":12},5594,"project-table-data-conversion","Форматирование и визуализация данных с использованием Vue.js","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-table-data-conversion.png?lang=ru",[465,493],{"id":786,"alias":787,"name":788,"cover":789,"user_count":83,"level":102,"fee_type":9,"lab_coins":9,"tags":790,"type":110,"status":102,"has_cert":81,"hidden":12},5595,"project-vanished-into-thin-air","Исчез в воздухе","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-vanished-into-thin-air.png?lang=ru",[465,493],{"id":792,"alias":793,"name":794,"cover":795,"user_count":9,"level":102,"fee_type":9,"lab_coins":9,"tags":796,"type":110,"status":102,"has_cert":81,"hidden":12},5596,"project-wish-sticky-note","Приложение для желаний в виде наклеек с использованием Vue.js","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-wish-sticky-note.png?lang=ru",[465,493],{"id":798,"alias":799,"name":800,"cover":801,"user_count":9,"level":102,"fee_type":9,"lab_coins":9,"tags":802,"type":110,"status":102,"has_cert":81,"hidden":12},5607,"project-dynamization-of-homepage-data","Динамизация данных главной страницы","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-dynamization-of-homepage-data.png?lang=ru",[465,493],{"id":804,"alias":805,"name":806,"cover":807,"user_count":8,"level":102,"fee_type":9,"lab_coins":9,"tags":808,"type":110,"status":102,"has_cert":81,"hidden":12},5609,"project-food-protein-revealed","Визуализация данных с использованием Echarts и JSON","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-food-protein-revealed.png?lang=ru",[465,493],{"id":810,"alias":811,"name":812,"cover":813,"user_count":9,"level":102,"fee_type":9,"lab_coins":9,"tags":814,"type":110,"status":102,"has_cert":81,"hidden":12},5611,"project-lets-have-a-meeting-together","Давайте проведем встречу вместе","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-lets-have-a-meeting-together.png?lang=ru",[465,493],{"id":816,"alias":817,"name":818,"cover":819,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":820,"type":110,"status":102,"has_cert":81,"hidden":12},5612,"project-missing-token","Создание системы входа с использованием Vue.js и Vuex","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-missing-token.png?lang=ru",[465,493],{"id":822,"alias":823,"name":824,"cover":825,"user_count":9,"level":102,"fee_type":9,"lab_coins":9,"tags":826,"type":110,"status":102,"has_cert":81,"hidden":12},5618,"project-time-management-master","Создание менеджера задач на Vue.js","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-time-management-master.png?lang=ru",[465,493],{"id":828,"alias":829,"name":830,"cover":831,"user_count":9,"level":102,"fee_type":9,"lab_coins":9,"tags":832,"type":110,"status":102,"has_cert":81,"hidden":12},5695,"project-implement-user-login-function","Реализация функции входа пользователя","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-implement-user-login-function.png?lang=ru",[465,493],{"id":834,"alias":835,"name":836,"cover":837,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":838,"type":110,"status":102,"has_cert":81,"hidden":12},5713,"project-time-with-your-phone","Время, проведенное за телефоном","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-time-with-your-phone.png?lang=ru",[465,493],{"id":840,"alias":841,"name":842,"cover":843,"user_count":102,"level":102,"fee_type":9,"lab_coins":9,"tags":844,"type":110,"status":102,"has_cert":81,"hidden":12},5714,"project-weather-trend","График погодных тенденций с использованием Vue и Echarts","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-weather-trend.png?lang=ru",[465,493],{"id":846,"alias":847,"name":848,"cover":849,"user_count":650,"level":102,"fee_type":9,"lab_coins":9,"tags":850,"type":110,"status":102,"has_cert":81,"hidden":12},5720,"project-counting-access-times-by-ip","Подсчет количества доступов по IP-адресу","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-counting-access-times-by-ip.png?lang=ru",[413],[],"Изучение HTML | HTML онлайн-курсы","Изучите HTML с помощью структурированного учебного плана, разработанного для начинающих. Эти интерактивные курсы HTML позволяют практиковаться в веб-дизайне в динамичной HTML-песочнице и развивать базовые навыки.","изучить HTML, курсы HTML, HTML для начинающих, учить HTML онлайн, уроки HTML, основы веба, основы HTML, практика HTML",[856],{"id":857,"alias":493,"name":459,"img_url":858,"course_count":117,"hours":859,"enable_uid":12,"skills_count":860,"is_online":81,"is_followed":12,"has_cert":81,"cert_threshold":476,"skilltree":493,"project_count":861,"category":22,"followers_count":862,"tags":863,"url":22,"description":864,"icon":22,"authors":865,"labs_count":643},71,"https:\u002F\u002Ffile.labex.io\u002Fupload\u002Fu\u002F1991\u002FY5b0Qn21hQLI.png",300,99,130,13825,[],"Изучите веб-разработку с помощью этого комплексного учебного курса, разработанного для начинающих. Эти структурированные курсы по веб-разработке предоставляют четкую дорожную карту для освоения как внешних (front-end), так и внутренних (back-end) технологий, от основ, таких как HTML, CSS и JavaScript, до популярных фреймворков. Благодаря практическим модулям без видео и упражнениям по кодированию вы будете создавать реальные веб-сайты и веб-приложения в интерактивной среде.",[],[86,90,87,88,89,91,92,93,94],"html-html-document-structure-597898",[],{"courses":870},[871,873,875],{"id":487,"alias":488,"name":489,"cover":490,"user_count":491,"level":102,"fee_type":9,"lab_coins":9,"tags":872,"type":9,"status":102,"has_cert":81,"hidden":12},[20,493],{"id":498,"alias":499,"name":500,"cover":501,"user_count":502,"level":102,"fee_type":9,"lab_coins":9,"tags":874,"type":110,"status":102,"has_cert":81,"hidden":12},[465,493],{"id":505,"alias":506,"name":507,"cover":508,"user_count":509,"level":102,"fee_type":9,"lab_coins":9,"tags":876,"type":110,"status":102,"has_cert":81,"hidden":12},[465,493],["Reactive",878],{"$si18n:cached-locale-configs":879,"$si18n:resolved-locale":91,"$scolor-mode":898,"$suser":-1,"$scopywriting":900,"$sjoined_teams":1147,"$sowned_teams":1148,"$sjoined_skill_strees":1149,"$sget_joined_skill_strees_pending":81,"$suser_streaks":1150,"$stoday_get_streak":12,"$snext_skill_badge":1150,"$snext_streak_badge":1150,"$sis_pc":81,"$swindow_width":9,"$ssite-config":1151},{"en":880,"zh":882,"es":884,"ja":886,"fr":888,"de":890,"ru":892,"pt":894,"ko":896},{"fallbacks":881,"cacheable":81},[94],{"fallbacks":883,"cacheable":81},[94],{"fallbacks":885,"cacheable":81},[94,94],{"fallbacks":887,"cacheable":81},[94],{"fallbacks":889,"cacheable":81},[94,94],{"fallbacks":891,"cacheable":81},[94,94],{"fallbacks":893,"cacheable":81},[94,94],{"fallbacks":895,"cacheable":81},[94,94],{"fallbacks":897,"cacheable":81},[94],{"preference":899,"value":899,"unknown":81,"forced":12},"light",[901,942,1019,1082,1087],{"key":902,"text":22,"tags":903,"data":905},"free_modal",[904],"free_user",{"close":906,"free_modal":908},{"hours":907},24,{"confirm_button":909,"sub_title":922,"title":932},{"label":910,"type":920,"url":921},{"de":911,"en":912,"es":913,"fr":914,"ja":915,"ko":916,"pt":917,"ru":918,"zh":919},"Level up mit LabEx Pro","Level Up With LabEx Pro","Sube de nivel con LabEx Pro","Montez de niveau avec LabEx Pro","LabEx Pro にレベルアップ","LabEx Pro로 레벨업","Suba de nível com LabEx Pro","Повысьте уровень с LabEx Pro","升级到 LabEx Pro","link","\u002Fpricing",{"de":923,"en":924,"es":925,"fr":926,"ja":927,"ko":928,"pt":929,"ru":930,"zh":931},"🚀 Seit 2017 · Vertraut von 1M+ Lernenden · 100% Praxisorientiert","🚀 Since 2017 · Trusted by 1M+ Learners · 100% Hands-On","🚀 Desde 2017 · Confiado por 1M+ Estudiantes · 100% Práctico","🚀 Depuis 2017 · Fait confiance par 1M+ Apprenants · 100% Pratique","🚀 2017年以来 · 100万人以上の学習者に信頼 · 100% ハンズオン","🚀 2017년부터 · 100만명+ 학습자가 신뢰 · 100% 실습","🚀 Desde 2017 · Confiado por 1M+ Aprendizes · 100% Prático","🚀 С 2017 года · Доверие 1M+ учащихся · 100% Практика","🚀 自2017年 · 100万+学习者信赖 · 100% 动手实践",{"de":933,"en":934,"es":935,"fr":936,"ja":937,"ko":938,"pt":939,"ru":940,"zh":941},"Kostenloser Plan auf 3 VM-Starts pro Tag begrenzt","Free Plan Limited to 3 VM Launches Per Day","Plan gratuito limitado a 3 lanzamientos de VM por día","Plan gratuit limité à 3 lancements de VM par jour","無料プランは1日3回のVM起動に制限されています","무료 플랜은 하루 3회 VM 실행으로 제한됩니다","Plano gratuito limitado a 3 inicializações de VM por dia","Бесплатный план ограничен 3 запусками ВМ в день","免费计划每天限制启动3个虚拟机",{"key":943,"text":22,"tags":944,"data":945},"country_codes",[904],{"codes":946},[947,950,953,956,959,962,965,968,971,974,977,980,983,986,989,992,995,998,1001,1004,1007,1010,1013,1016],{"code":948,"emoji":949},"IN","🇮🇳",{"code":951,"emoji":952},"ID","🇮🇩",{"code":954,"emoji":955},"EG","🇪🇬",{"code":957,"emoji":958},"PK","🇵🇰",{"code":960,"emoji":961},"MY","🇲🇾",{"code":963,"emoji":964},"VN","🇻🇳",{"code":966,"emoji":967},"UG","🇺🇬",{"code":969,"emoji":970},"PH","🇵🇭",{"code":972,"emoji":973},"BR","🇧🇷",{"code":975,"emoji":976},"ET","🇪🇹",{"code":978,"emoji":979},"BD","🇧🇩",{"code":981,"emoji":982},"NG","🇳🇬",{"code":984,"emoji":985},"KE","🇰🇪",{"code":987,"emoji":988},"IR","🇮🇷",{"code":990,"emoji":991},"MX","🇲🇽",{"code":993,"emoji":994},"TR","🇹🇷",{"code":996,"emoji":997},"DZ","🇩🇿",{"code":999,"emoji":1000},"SD","🇸🇩",{"code":1002,"emoji":1003},"AO","🇦🇴",{"code":1005,"emoji":1006},"PE","🇵🇪",{"code":1008,"emoji":1009},"GH","🇬🇭",{"code":1011,"emoji":1012},"MZ","🇲🇿",{"code":1014,"emoji":1015},"IQ","🇮🇶",{"code":1017,"emoji":1018},"UZ","🇺🇿",{"key":1020,"text":1021,"tags":1022,"data":1026},"free_labs_page","free labs 页面 TDK",[904,1023,1024,1025],"trial_user","pro_user","not_logged_in",{"free_labs_page":1027},[1028,1034,1040,1046,1052,1058,1064,1070,1076],{"description":1029,"lang":94,"meta_description":1030,"meta_keywords":1031,"meta_title":1032,"title":1033},"1000+ Free Interactive Labs in 30+ Tech Fields for Developers and Students. Practice and enhance your skills with free hands-on exercises and real-world scenarios.\n","Discover LabEx's 1000+ free interactive labs across Linux, DevOps, Cybersecurity, Data Science, Web Development, Machine Learning, and more. Gain free access to expert-led training and hands-on practice in a dynamic environment.\n","Free Labs, LabEx, Interactive Labs, Free Tech Skills, Free Hands-On Practice, Online Learning\n","Free Labs | Interactive Practice in 30+ Tech Fields","Free Labs",{"description":1035,"lang":86,"meta_description":1036,"meta_keywords":1037,"meta_title":1038,"title":1039},"为开发者和学生量身打造的 1000+ 免费互动实验，覆盖 30+ 技术领域。通过免费实践练习和真实场景，提升您的技能。\n","探索 LabEx 提供的 1000+ 免费互动实验，涵盖 Linux、DevOps、网络安全、数据科学、 Web 开发、机器学习等领域。在动态环境中免费获得专家指导的培训和实践机会。\n","免费实验, LabEx, 互动实验, 免费技术技能, 免费实践练习, 在线学习\n","免费实验 | 30+ 技术领域互动实践","免费实验",{"description":1041,"lang":87,"meta_description":1042,"meta_keywords":1043,"meta_title":1044,"title":1045},"Más de 1000 laboratorios interactivos gratuitos en más de 30 áreas tecnológicas para desarrolladores y estudiantes. Mejora tus habilidades con ejercicios prácticos gratuitos y escenarios del mundo real.\n","Explora más de 1000 laboratorios interactivos gratuitos de LabEx en Linux, DevOps, Ciberseguridad, Ciencia de Datos, Desarrollo Web, Machine Learning y más. Accede gratis a formación guiada por expertos y práctica en entornos dinámicos.\n","Laboratorios Gratuitos, LabEx, Laboratorios Interactivos, Habilidades Técnicas Gratis, Práctica Práctica Gratuita, Aprendizaje en Línea\n","Laboratorios Gratuitos | Práctica Interactiva en Más de 30 Áreas Tecnológicas","Laboratorios Gratuitos",{"description":1047,"lang":88,"meta_description":1048,"meta_keywords":1049,"meta_title":1050,"title":1051},"Plus de 1000 laboratoires interactifs gratuits dans plus de 30 domaines technologiques pour les développeurs et les étudiants. Améliorez vos compétences avec des exercices pratiques gratuits et des scénarios réels.\n","Découvrez plus de 1000 laboratoires interactifs gratuits de LabEx en Linux, DevOps, Cybersécurité, Science des Données, Développement Web, Machine Learning et plus encore. Accédez gratuitement à des formations dirigées par des experts et à des exercices pratiques dans un environnement dynamique.\n","Laboratoires Gratuits, LabEx, Laboratoires Interactifs, Compétences Techniques Gratuites, Pratique Pratique Gratuite, Apprentissage en Ligne\n","Laboratoires Gratuits | Pratique Interactive dans Plus de 30 Domaines Technologiques","Laboratoires Gratuits",{"description":1053,"lang":89,"meta_description":1054,"meta_keywords":1055,"meta_title":1056,"title":1057},"Über 1000 kostenlose interaktive Labs in über 30 Technologiebereichen für Entwickler und Studierende. Verbessere deine Fähigkeiten mit kostenlosen praktischen Übungen und realen Szenarien.\n","Entdecke über 1000 kostenlose interaktive Labs von LabEx in Bereichen wie Linux, DevOps, Cybersicherheit, Datenwissenschaft, Webentwicklung, maschinelles Lernen und mehr. Erhalte kostenlosen Zugang zu von Experten geleiteten Schulungen und praktischen Übungen in einer dynamischen Umgebung.\n","Kostenlose Labs, LabEx, Interaktive Labs, Kostenlose Technische Fähigkeiten, Kostenlose Praktische Übungen, Online-Lernen\n","Kostenlose Labs | Interaktive Übungen in Über 30 Technologiebereichen","Kostenlose Labs",{"description":1059,"lang":90,"meta_description":1060,"meta_keywords":1061,"meta_title":1062,"title":1063},"開発者や学生向けに、30以上の技術分野をカバーする1000以上の無料インタラクティブなラボ。無料の実践練習と現実のシナリオでスキルを向上させましょう。\n","LabExの1000以上の無料インタラクティブなラボを、Linux、DevOps、サイバーセキュリティ、データサイエンス、ウェブ開発、機械学習などで体験。専門家による指導とダイナミックな環境での無料実践練習を利用できます。\n","無料ラボ, LabEx, インタラクティブなラボ, 無料技術スキル, 無料実践練習, オンライン学習\n","無料ラボ | 30以上の技術分野でインタラクティブな実践","無料ラボ",{"description":1065,"lang":91,"meta_description":1066,"meta_keywords":1067,"meta_title":1068,"title":1069},"Более 1000 бесплатных интерактивных лабораторий в более чем 30 технических областях для разработчиков и студентов. Совершенствуйте свои навыки с бесплатными практическими упражнениями и реальными сценариями.\n","Ознакомьтесь с более чем 1000 бесплатных интерактивных лабораторий от LabEx по Linux, DevOps, кибербезопасности, науке о данных, веб-разработке, машинному обучению и многому другому. Получите бесплатный доступ к обучению под руководством экспертов и практическим упражнениям в динамичной среде.\n","Бесплатные Лаборатории, LabEx, Интерактивные Лаборатории, Бесплатные Технические Навыки, Бесплатная Практика, Онлайн-Обучение\n","Бесплатные Лаборатории | Интерактивная Практика в Более Чем 30 Технических Областях","Бесплатные Лаборатории",{"description":1071,"lang":92,"meta_description":1072,"meta_keywords":1073,"meta_title":1074,"title":1075},"개발자와 학생을 위해 30개 이상의 기술 분야를 다루는 1000개 이상의 무료 인터랙티브 랩. 무료 실습 연습과 실제 시나리오로 스킬을 향상하세요.\n","LabEx의 1000개 이상의 무료 인터랙티브 랩을 통해 Linux, DevOps, 사이버 보안, 데이터 사이언스, 웹 개발, 머신 러닝 등을 탐구하세요. 전문가가 이끄는 교육과 동적 환경에서의 무료 실습 기회를 누리세요.\n","무료 랩, LabEx, 인터랙티브 랩, 무료 기술 스킬, 무료 실습 연습, 온라인 학습\n","무료 랩 | 30개 이상의 기술 분야에서 인터랙티브 연습","무료 랩",{"description":1077,"lang":93,"meta_description":1078,"meta_keywords":1079,"meta_title":1080,"title":1081},"Mais de 1000 laboratórios interativos gratuitos em mais de 30 áreas tecnológicas para desenvolvedores e estudantes. Aprimore suas habilidades com exercícios práticos gratuitos e cenários do mundo real.\n","Explore mais de 1000 laboratórios interativos gratuitos da LabEx em Linux, DevOps, Cibersegurança, Ciência de Dados, Desenvolvimento Web, Machine Learning e mais. Obtenha acesso gratuito a treinamentos liderados por especialistas e prática em ambientes dinâmicos.\n","Laboratórios Gratuitos, LabEx, Laboratórios Interativos, Habilidades Técnicas Gratuitas, Prática Prática Gratuita, Aprendizado Online\n","Laboratórios Gratuitos | Prática Interativa em Mais de 30 Áreas Tecnológicas","Laboratórios Gratuitos",{"key":1083,"text":1084,"tags":1085,"data":1086},"ai_check","ai inspect 是否开启",[904,1023,1024],{"ai_check":81},{"key":1088,"text":1089,"tags":1090,"data":1091},"exercises_page","Exercises 页面 TDK",[904,1023,1024,1025],{"exercises_page":1092},[1093,1099,1105,1111,1117,1123,1129,1135,1141],{"description":1094,"lang":94,"meta_description":1095,"meta_keywords":1096,"meta_title":1097,"title":1098},"Explore 2000+ hands-on exercises and real-world challenges across 30+ tech domains. Build your skills with guided practice and interactive scenarios.\n","Practice hands-on skills across Linux, Python, DevOps, Cybersecurity, and more. Level up through guided tasks, troubleshooting labs, and scenario-based exercises built for real-world learning.\n","Exercises, Challenges, LabEx, Hands-On Practice, Tech Skills, Interactive Learning, Online Exercises\n","Interactive Exercises & Real-World Challenges","Exercises",{"description":1100,"lang":86,"meta_description":1101,"meta_keywords":1102,"meta_title":1103,"title":1104},"探索覆盖 30+ 技术领域的 2000+ 动手练习和真实挑战，通过引导式练习提升实战能力。\n","覆盖 Linux、Python、DevOps、网络安全等领域的动手技能练习。通过引导任务、故障排查实验和基于场景的练习，提升实战能力。\n","技术练习, 挑战任务, LabEx, 动手实践, 技术技能提升, 在线练习, 互动学习\n","互动练习与真实挑战","技术练习",{"description":1106,"lang":87,"meta_description":1107,"meta_keywords":1108,"meta_title":1109,"title":1110},"Explora más de 2000 ejercicios prácticos y desafíos reales en más de 30 áreas tecnológicas. Mejora tus habilidades con práctica guiada e interactiva.\n","Practica habilidades prácticas en Linux, Python, DevOps, Ciberseguridad y más. Mejora con tareas guiadas, laboratorios de resolución de problemas y ejercicios basados en escenarios reales.\n","Ejercicios, Desafíos, LabEx, Práctica Práctica, Habilidades Técnicas, Aprendizaje Interactivo, Ejercicios en Línea\n","Ejercicios Interactivos y Desafíos Reales","Ejercicios",{"description":1112,"lang":88,"meta_description":1113,"meta_keywords":1114,"meta_title":1115,"title":1116},"Découvrez plus de 2000 exercices pratiques et défis concrets dans plus de 30 domaines technologiques. Renforcez vos compétences grâce à une pratique guidée et interactive.\n","Pratiquez des compétences pratiques en Linux, Python, DevOps, Cybersécurité et plus encore. Progressez grâce à des tâches guidées, des labs de dépannage et des exercices basés sur des scénarios réels.\n","Exercices, Défis, LabEx, Pratique Interactive, Compétences Techniques, Apprentissage en Ligne\n","Exercices Interactifs et Défis Concrets","Exercices",{"description":1118,"lang":89,"meta_description":1119,"meta_keywords":1120,"meta_title":1121,"title":1122},"Über 2000 praktische Übungen und reale Herausforderungen in über 30 Technologiebereichen. Stärke deine Fähigkeiten durch geführte und interaktive Praxis.\n","Trainiere praktische Fähigkeiten in Linux, Python, DevOps, Cybersicherheit und mehr. Steigere dein Können mit geführten Aufgaben, Fehlersuche-Labs und szenariobasierten Übungen für echtes Lernen.\n","Übungen, Herausforderungen, LabEx, Praktische Übung, Technische Fähigkeiten, Interaktives Lernen, Online-Übungen\n","Interaktive Übungen & Reale Herausforderungen","Übungen",{"description":1124,"lang":90,"meta_description":1125,"meta_keywords":1126,"meta_title":1127,"title":1128},"30以上の技術分野にわたる2000以上の実践的な練習問題やチャレンジを体験。ガイド付きの練習でスキルを磨きましょう。\n","Linux、Python、DevOps、サイバーセキュリティなどの実践スキルを習得しましょう。ガイド付きタスクやトラブルシューティングラボ、シナリオに基づいた演習でスキルを向上させましょう。\n","練習問題, チャレンジ, LabEx, 実践スキル, 技術力向上, インタラクティブラーニング, オンライン練習\n","インタラクティブな練習問題と現実的なチャレンジ","練習問題",{"description":1130,"lang":91,"meta_description":1131,"meta_keywords":1132,"meta_title":1133,"title":1134},"Более 2000 практических упражнений и реальных задач в более чем 30 технических областях. Развивайте свои навыки через интерактивную практику.\n","Отрабатывайте практические навыки в Linux, Python, DevOps, кибербезопасности и других областях. Повышайте уровень через пошаговые задания, лаборатории по устранению неполадок и упражнения, основанные на реальных сценариях.\n","Упражнения, Задачи, LabEx, Практика, Технические Навыки, Интерактивное Обучение, Онлайн Упражнения\n","Интерактивные Упражнения и Реальные Задачи","Упражнения",{"description":1136,"lang":92,"meta_description":1137,"meta_keywords":1138,"meta_title":1139,"title":1140},"30개 이상의 기술 분야에 걸친 2000개 이상의 실습 연습 및 실제 과제를 경험하세요. 가이드형 실습으로 기술 능력을 향상하세요。\n","Linux, Python, DevOps, 사이버 보안 등 다양한 분야의 실습 스킬을 연습하세요. 가이드 과제, 문제 해결 랩, 시나리오 기반 연습을 통해 실전 역량을 향상하세요.\n","연습문제, 도전과제, LabEx, 실습훈련, 기술역량 향상, 인터랙티브 학습, 온라인 연습\n","인터랙티브 연습 & 실전 도전 과제","연습문제",{"description":1142,"lang":93,"meta_description":1143,"meta_keywords":1144,"meta_title":1145,"title":1146},"Explore mais de 2000 exercícios práticos e desafios reais em mais de 30 áreas tecnológicas. Melhore suas habilidades com prática guiada e interativa.\n","Pratique habilidades práticas em Linux, Python, DevOps, Cibersegurança e mais. Evolua com tarefas guiadas, laboratórios de resolução de problemas e exercícios baseados em cenários reais.\n","Exercícios, Desafios, LabEx, Prática Interativa, Habilidades Técnicas, Exercícios Online, Aprendizado Prático\n","Exercícios Interativos e Desafios Reais","Exercícios",[],[],[],null,{"currentLocale":91,"defaultLocale":94,"env":1152,"name":1153,"url":1154},"production","LabEx","https:\u002F\u002Flabex.io",["Set"],["ShallowReactive",1157],{"tutorialDetail:html-create-basic-html-structure-and-tags-451029:ru":1150,"footerData_ru":1150,"skillTreeDetailData:html:ru":1150,"skillTreeListData:basic:ru":1150,"tutorialRecommendCourseListData:html-create-basic-html-structure-and-tags-451029:ru":1150},"\u002Fru\u002Ftutorials\u002Fhtml-create-basic-html-structure-and-tags-451029"]</script></body></html>