كيف يعمل الويب، وأول صفحة لك

اكتشف ماذا يحدث عندما تكتب عنواناً في المتصفح، وابنِ أساس موقعك.

ماذا يحدث عندما تفتح موقعاً

عندما تكتب شيئاً مثل www.myschool.com في المتصفح، إليك ما يحدث:

يرسل المتصفح رسالة عبر الإنترنت إلى خادم – جهاز الكمبيوتر الذي يعيش فيه الموقع: “مرحباً، أرسل لي الصفحة!”
يرد الخادم ويرسل ملفات – نصوص، صور، كود.
يرسم المتصفح الصفحة على شاشتك باستخدام تلك الملفات.

الملفات التي يرسلها الخادم مكتوبة بلغة تسمى HTML. وهذا بالضبط ما ستتعلمه. الآن موقعك لن يكون على خادم – سيعيش على جهازك، وسنضعه على الإنترنت في الدرس الأخير.

اختر مشروعك

قبل أن تكتب سطراً واحداً، قرّر ماذا ستبني فعلاً. ستعمل على أحد هذه المشاريع طوال المستوى:

🏫 موقع مدرستي – الجدول، قائمة الغداء، الفعاليات، المعلمون
🙋 موقعي الشخصي – عني، ما أحبه، إبداعاتي
🌍 يوميات سفر – رحلات، صور، ذكريات
⚽ موقع نادي رياضي – الفريق، المباريات، التدريب

اخترت واحداً؟ رائع. مهام كل درس تغطي المشاريع الأربعة – فقط ابحث عن مشروعك.

شاهد معي: الهيكل الذي تبدأ به كل صفحة على الأرض

كل صفحة ويب – من صفحتك إلى YouTube – تبدأ بنفس الهيكل بالضبط:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

لنترجم ذلك إلى لغة بسيطة:

الكود	ماذا يخبر المتصفح
`<!doctype html>`	”انتباه، صفحة HTML تبدأ!”
`<html lang="en">`	”كل شيء بالداخل صفحة واحدة، وهي بالإنجليزية.”
`<head>` … `</head>`	”هنا معلومات عن الصفحة.” الزوار لا يرونها.
`<meta charset="UTF-8">`	”قد تكون هنا أحرف خاصة، كن مستعداً.”
`<title>` … `</title>`	اسم الصفحة – يظهر في تبويب المتصفح.
`<body>` … `</body>`	”كل ما يراه الزائر فعلاً يبدأ هنا.” كل محتواك يذهب هنا.

لاحظ كيف تعمل الوسوم: <h1> يفتح شيئاً و</h1> (مع الشرطة المائلة) يغلقه مرة أخرى. ما بينهما ينتمي إلى ذلك الوسم. تماماً كالأقواس.

دورك الآن 💪

افتح مجلد my-website (من مستوى التحضير) في VS Code، وافتح ملف index.html بداخله. احذف ما فيه واكتب هيكل الصفحة من المثال أعلاه.
غيّر <title> و<h1> ليتناسبا مع مشروعك، وأضف فقرة <p> تحت العنوان بجملة واحدة عن موقعك.
احفظ (Ctrl+S) وافتح index.html في متصفحك (أو حدّث الصفحة بـ F5).

غير متأكد؟ إليك حلول لكل مشروع:

🏫 الحل: موقع مدرستي

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 الحل: موقعي الشخصي

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 الحل: يوميات سفر

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ الحل: موقع نادي رياضي

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

تحقق من نفسك: تبويب المتصفح يعرض اسم موقعك، والصفحة تعرض عنوانك وجملتك. إذا كان كذلك – حجر الأساس موضوع!

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

الموقع = ملفات يرسلها خادم إلى متصفح. المتصفح يرسم صفحة منها.
كل صفحة لها نفس الهيكل: <head> (معلومات عن الصفحة) و<body> (المحتوى المرئي).
الوسوم تفتح مثل <this> وتغلق مثل </this>.