Поиск сокровищ в HTML
Используйте HTML, чтобы разгадывать подсказки и находить скрытые сообщения
«Поиск сокровищ в HTML» — бесплатный урок HTML for Kids на CoddyKit. Это урок 2 из 2. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 2 уроков всего.
Начало охоты за сокровищами
Охота за сокровищами в HTML
Добро пожаловать на охоту за сокровищами в HTML! Ваша миссия — найти спрятанное сокровище, разгадывая подсказки, скрытые в HTML-коде. Внимательно выполняйте каждый шаг и изменяйте код, чтобы продвигаться дальше.
Цель: Найти сокровище, выполнив каждое задание!
Подготовка карты сокровищ
Шаг 1: подготовка карты сокровищ
Первая подсказка спрятана в комментарии. Откройте HTML-код и найдите её!
Вот исходный HTML-код:
<!DOCTYPE html>
<html>
<head>
<title>Treasure Hunt</title>
</head>
<body>
<h1>Welcome to the Treasure Hunt!</h1>
<p>Follow the clues to find the treasure.</p>
<!-- Clue 1: Add an image to this page with a description of "Treasure Map". -->
</body>
</html>
Добавление карты сокровищ
Шаг 2: добавление карты сокровищ
Вы добавили карту сокровищ? Вот пример:
<img src="treasure-map.jpg" alt="Treasure Map" />Сбор инструментов
Шаг 3: сбор инструментов
Чтобы продолжить, создайте список инструментов, которые Вы взяли бы на охоту за сокровищами. Используйте теги <ul> и <li>.
Пример:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
Поиск дополнительной информации
Шаг 4: поиск дополнительной информации
Добавьте ссылку на веб-сайт об охоте за сокровищами с помощью тега <a>.
Пример:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
Последнее испытание
Шаг 5: последнее испытание
Сокровище почти у Вас! Чтобы открыть его, создайте кнопку, которая при нажатии показывает скрытое сообщение.
Используйте следующий пример в качестве руководства:
<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
Reveal the Treasure
</button>
Проверка страницы
Шаг 6: проверка страницы
Теперь, когда Вы добавили все элементы, проверьте страницу. Убедитесь, что:
- Изображение отображается правильно.
- Список инструментов виден.
- Ссылка открывает веб-сайт в новой вкладке.
- Кнопка показывает сообщение о сокровище.
Если всё работает, поздравляем — Вы завершили охоту за сокровищами!
Финальное сокровище
Вот как может выглядеть Ваша итоговая страница:
<!DOCTYPE html>
<html>
<head>
<title>Treasure Hunt</title>
</head>
<body>
<h1>Welcome to the Treasure Hunt!</h1>
<p>Follow the clues to find the treasure.</p>
<!-- Step 1: Added the treasure map -->
<img src="treasure-map.jpg" alt="Treasure Map" />
<!-- Step 2: Listed tools for treasure hunting -->
<h2>My Treasure Hunting Tools</h2>
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
<!-- Step 3: Added a useful link -->
<h2>Learn More</h2>
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
<!-- Step 4: Added the hidden treasure -->
<h2>Your Treasure</h2>
<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
Reveal the Treasure
</button>
</body>
</html>
Повторение темы охоты за сокровищами
Great Job!
Congratulations! You’ve completed the HTML Treasure Hunt. You’ve practiced working with images, lists, links, and buttons—all essential elements of web development. Keep exploring and creating amazing projects!
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 16
- Уроки
- 35
Часто задаваемые вопросы
Урок «Поиск сокровищ в HTML» бесплатный?
Да — полный текст урока «Поиск сокровищ в HTML» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 2 уроков всего.
Чему я научусь в уроке «Поиск сокровищ в HTML»?
Используйте HTML, чтобы разгадывать подсказки и находить скрытые сообщения Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 2.
Сколько времени занимает урок «Поиск сокровищ в HTML»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Пишем вместе: создаём простую веб-страницу
- Поиск сокровищ в HTML