العربية

أوروبا

آسيا

← المستوى 1 – البنّاء

الدرس 4 من 12 ⏱ 25 دقيقة

الروابط وصفحة ثانية

موقعك يتوقف عن كونه صفحة واحدة فقط. ستبني صفحة ثانية وتوصلهما بروابط.

شاهد معي: رابط

الرابط – الشيء القابل للنقر الذي ينقلك إلى مكان آخر – يُصنع بوسم <a>:

<!-- A link to another page on your own website -->
<a href="lunch-menu.html">Lunch Menu</a>

<!-- A link out to somewhere else on the internet -->
<a href="https://www.si.edu">Our favorite museum's website</a>

صفحة ثانية

موقعك لديه index.html فقط حتى الآن. لنضف صفحة ثانية – إنها مجرد ملف آخر في نفس المجلد:

  1. في VS Code، أنشئ ملفاً جديداً. سمّه حسب مشروعك، مثل lunch-menu.html، about-me.html، trips.html، أو roster.html. مرة أخرى، أحرف صغيرة، بدون مسافات أو تشكيل.

  2. الصق هيكل الصفحة الكامل (نفسه من الدرس 1) وأعطه <title> و<h1> ومحتوى خاصاً به.

  3. وصل الصفحات بروابط: على index.html، أضف رابطاً للصفحة الجديدة، وعلى الصفحة الجديدة، أضف رابطاً للعودة – شيء مثل <a href="index.html">Back home</a>.

دورك الآن 💪

أنشئ صفحة ثانية واربط الصفحتين معاً. اجعل رابطاً واحداً على الأقل يشير إلى مكان على الإنترنت.

🏫 موقع المدرسة – الحل (lunch-menu.html) 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lunch Menu – Riverside Elementary</title>
  </head>
  <body>
    <h1>This Week's Lunch Menu</h1>
    <ul>
      <li>Monday: tomato soup with pasta</li>
      <li>Tuesday: chicken with rice</li>
      <li>Wednesday: pancakes with syrup 🎉</li>
      <li>Thursday: beef stew with dumplings</li>
      <li>Friday: fish and potatoes</li>
    </ul>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>

وعلى index.html، أضف:

<p><a href="lunch-menu.html">Check out the lunch menu</a></p>
🙋 الموقع الشخصي – الحل (about-me.html) 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>More About Me – Jake</title>
  </head>
  <body>
    <h1>More About Me</h1>
    <p>I'm in 4th grade, I have a dog named Rocky, and I collect soccer cards.</p>
    <p>My favorite thing to listen to is <a href="https://www.youtube.com">music on YouTube</a>.</p>
    <p><a href="index.html">← Back home</a></p>
  </body>
</html>
🌍 يوميات سفر – الحل (trips.html) 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>All Trips – Where We've Been</title>
  </head>
  <body>
    <h1>All Our Trips</h1>
    <ol>
      <li>The mountains – a ridge hike</li>
      <li>Greece – island hopping</li>
      <li>Washington, D.C. – museums and monuments</li>
    </ol>
    <p>We plan our routes with <a href="https://maps.google.com">Google Maps</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>
⚽ موقع النادي – الحل (roster.html) 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Roster – Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Team Roster</h1>
    <ul>
      <li>Jake – goalkeeper (captain)</li>
      <li>Matt – defense</li>
      <li>Owen – midfield</li>
      <li>Tom – forward</li>
    </ul>
    <p>Check the league schedule at <a href="https://www.ussoccer.com">ussoccer.com</a>.</p>
    <p><a href="index.html">← Back to the homepage</a></p>
  </body>
</html>
✅

تحقق من نفسك: تنقر على رابط في الصفحة الرئيسية → تفتح الصفحة الثانية. تنقر “Back” → عدت للبيت. موقعك لديه الآن أكثر من صفحة للمرة الأولى!

ما ستخرج به من هذا الدرس

© 2026 Ing. Martin Polak / AlgoRhino · شروط استخدام المحتوى