البحث عن كنز 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>
مراجعة البحث عن الكنز
أحسنتم!
تهانينا! لقد أكملتم HTML Treasure Hunt. لقد تدربتم على التعامل مع الصور والقوائم والروابط والأزرار، وهي جميعًا عناصر أساسية في تطوير الويب. واصلوا الاستكشاف وإنشاء مشاريع مذهلة!
الأسئلة الشائعة
هل درس «البحث عن كنز 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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- البرمجة خطوة بخطوة: أنشئ صفحة ويب بسيطة
- البحث عن كنز HTML