SkillPlay

Образовательная платформа — Изучай и Играй

👋 Добро пожаловать!

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

🎯 Здесь ты научишься:

  • понимать, как работает HTML, CSS и вёрстка
  • создавать таблицы, списки и блоки
  • управлять расположением элементов
  • учиться через игры и тренажёры

💡 Всё объясняется простым языком, с примерами и возможностью сразу попробовать самому.

Не бойся ошибок — здесь можно экспериментировать и учиться в своём темпе 🚀

📘 Основы HTML — первый шаг в веб-разработке

HTML — это язык разметки, с помощью которого создаются сайты. Он говорит браузеру, что и где показывать.

🔤 Что такое HTML?

HTML состоит из тегов. Теги пишутся в угловых скобках < >.

Пример:

<p>Привет, мир!</p>

🧱 Где писать HTML?

  • В обычном файле .html
  • В редакторе кода (VS Code)
  • Прямо в этом тренажёре 👇

📋 Таблицы

<table>
  <tr>
   <td>Ячейка</td>
  </tr>
</table>
table

📑 Списки

Маркированный список:

<ul>
  <li>Пункт</li>
</ul>
table

Нумерованный список:

<ol>
  <li>Пункт</li>
</ol>
table

🖼 Как вставить картинку в HTML

Чтобы добавить изображение на сайт, используется тег <img>. У него есть обязательный атрибут src — путь к картинке.

Пример:

<img src="cat.jpg" alt="Котик">

🔹 src — путь к картинке
🔹 alt — текст, если картинка не загрузилась

📁 Сначала сохрани картинку

Перед тем как вставить картинку на сайт, её нужно сохранить в папку с твоим HTML-файлом.

📌 Например, если твой файл называется:
index.html

Тогда картинка должна лежать рядом, например:

index.html
image.png

После этого ты сможешь вставить картинку с помощью тега:

<img src="image.png" alt="Моя картинка">

💡 Если картинка лежит в папке images, путь будет таким:

<img src="images/image.png" alt="Моя картинка">

⚠️ Если путь указан неправильно — картинка не появится.

💡 Совет: HTML — это скелет сайта. Красоту добавляет CSS, а логику — JavaScript.

🎮 HTML Тренажёр

Задание 1

🎮 HTML5 — Тест

Очки: 0

📘 Учебные тренажёры

✨ Дополнительно

Хочешь больше SQL-игр или игру под свой язык?

🎉 Поздравляем!

Ты успешно завершил тренажёр.
Если ты хочешь получить дополнительные игры-тренажёры, ты можешь поддержать автора донатом.

💛 После доната откроются: Ассемблер, SQL, C++, мини-игры, CSS Animation и адаптивный дизайн (Media Queries).

💛 Поддержать донатом

После пожертвования нажми кнопку ниже