الصفحة الرئيسية

ترجمة آلية تحت المراجعة

قائمة تنفيذ التمرين

قرأت المواصفات الأصلية وحددت المدخلات والمخرجات. نفذت الحل على مراحل واختبرت الحالات الأساسية. شغلت أدوات التحقق وحفظت أو سلمت عملي عبر رابط CS50.

تُحفظ علامات هذه القائمة على هذا الجهاز والمتصفح فقط. أنشئ حسابًا مفعّلًا لحفظ إنجاز التمرين في مسارك.

الصفحة الرئيسية

أنشئ صفحة رئيسية بسيطة باستخدام HTML وCSS وJavaScript.

الخلفية

لقد أتاح الإنترنت أشياء مذهلة: يمكننا استخدام محرك بحث للبحث عن أي شيء يمكن تخيله، والتواصل مع الأصدقاء وأفراد العائلة في جميع أنحاء العالم، وممارسة الألعاب، والحصول على دورات تدريبية، وغير ذلك الكثير. ولكن اتضح أن جميع الصفحات التي قد نزورها تقريبًا مبنية على ثلاث لغات أساسية، كل واحدة منها تخدم غرضًا مختلفًا قليلاً:

HTML، أو لغة ترميز النص التشعبي، والذي يستخدم لوصف محتوى مواقع الويب؛
CSS، أوراق الأنماط المتتالية، والذي يستخدم لوصف جماليات مواقع الويب؛ و
JavaScript، والذي يستخدم لجعل مواقع الويب تفاعلية وديناميكية.

أنشئ صفحة رئيسية بسيطة تقدم نفسك أو هوايتك المفضلة أو نشاطك اللامنهجي أو أي شيء آخر يهمك.

البدء

قم بتسجيل الدخول cs50.dev، انقر على نافذتك الطرفية، وقم بالتنفيذ cd بمفرده. يجب أن تجد أن مطالبة النافذة الطرفية الخاصة بك تشبه ما يلي:

التنفيذ التالي

wget https://cdn.cs50.net/2026/x/psets/8/homepage.zip

من أجل تنزيل ملف ZIP يسمى homepage.zip في مساحة الشيفرة الخاصة بك.

ثم نفذ

unzip homepage.zip

لإنشاء مجلد يسمى homepage. لم تعد بحاجة إلى ملف ZIP، حتى تتمكن من التنفيذ

rm homepage.zip

ثم قم بالرد بـ "y" متبوعًا بـ Enter عند المطالبة لإزالة ملف ZIP الذي قمت بتنزيله.

الآن اكتب

cd homepage

متبوعًا بـ Enter للانتقال إلى (i.e.، open) هذا الدليل. يجب أن تشبه مطالبتك الآن ما يلي.

homepage/ $

تنفيذ ls بمفرده، ويجب أن تشاهد بعض الملفات:

index.html  styles.css

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

http-server

في النافذة الطرفية. بعد ذلك، انقر مع الضغط على مفتاح الأوامر (إذا كان على جهاز Mac) أو انقر مع الضغط على مفتاح التحكم (إذا كان على جهاز الكمبيوتر) على الرابط الأول الذي يظهر:

http-server running on LINK

حيث LINK هو عنوان الخادم الخاص بك.

المواصفات

التنفيذ في homepage دليل موقع الويب الذي يجب أن:

تحتوي على أربعة أنواع مختلفة على الأقل .html صفحات، واحدة منها على الأقل index.html (الصفحة الرئيسية لموقع الويب الخاص بك)، ويجب أن يكون من الممكن الانتقال من أي صفحة على موقع الويب الخاص بك إلى أي صفحة أخرى عن طريق اتباع ارتباط تشعبي واحد أو أكثر.
استخدم ما لا يقل عن عشر (10) علامات HTML مميزة بجانب ذلك <html>, <head>, <body>و <title>. باستخدام بعض العلامات (e.g.، <p>) لا تزال عدة مرات تُحسب كواحدة (1) فقط من تلك العشرة!

قم بدمج ميزة واحدة أو أكثر من Bootstrap في موقعك. Bootstrap هي مكتبة مشهورة (تأتي مع الكثير من فئات CSS والمزيد) يمكنك من خلالها تجميل موقعك. انظر وثائق Bootstrap للبدء. على وجه الخصوص، قد تجد بعض من مكونات Bootstrap من الفائدة. لإضافة Bootstrap إلى موقعك، يكفي تضمينه

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

في صفحاتك <head>، والذي يمكنك أيضًا تضمينه أدناه

<link href="styles.css" rel="stylesheet">

لربط CSS الخاص بك.

أن يكون لديك ملف ورقة أنماط واحد على الأقل من تصميمك، styles.css، والذي يستخدم ما لا يقل عن خمسة (5) محددات CSS مختلفة (e.g.tag (example)، فئة (.example)، أو المعرف (#example)) والتي تستخدم من خلالها ما لا يقل عن خمس (5) خصائص مختلفة لـ CSS، مثل font-size، أو margin; و
قم بدمج واحدة أو أكثر من ميزات JavaScript في موقعك لجعل موقعك أكثر تفاعلية. على سبيل المثال، يمكنك استخدام JavaScript لإضافة تنبيهات، أو لإحداث تأثير على فاصل زمني متكرر، أو لإضافة تفاعل إلى الأزرار أو القوائم المنسدلة أو النماذج. لا تتردد في أن تكون خلاقة!
تأكد من أن موقعك يبدو جميلًا على المتصفحات سواء على الأجهزة المحمولة أو أجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية.

يجب عليك أيضًا إنشاء ملف نصي، specification.txt، الذي يسرد علامات HTML العشرة وخصائص CSS الخمس التي استخدمتها، بالإضافة إلى وصف مختصر (من جملة واحدة) لكيفية اختيارك لاستخدام JavaScript وBootstrap.

الاختبار

إذا كنت تريد أن ترى كيف يبدو موقعك أثناء العمل عليه، فيمكنك تشغيله http-server. انقر مع الضغط على مفتاح الأوامر أو التحكم على الرابط الأول الذي يقدمه خادم http، والذي من المفترض أن يفتح صفحة الويب الخاصة بك في علامة تبويب جديدة. من المفترض أن تتمكن بعد ذلك من تحديث علامة التبويب التي تحتوي على صفحة الويب الخاصة بك لرؤية أحدث التغييرات.

تذكر أيضًا أنه من خلال فتح أدوات المطورين في Google Chrome، يمكنك القيام بذلك محاكاة زيارة صفحتك على جهاز محمول عن طريق النقر على أيقونة على شكل هاتف على يسار العناصر في نافذة أدوات المطور، أو بمجرد فتح علامة التبويب أدوات المطور بالفعل، عن طريق الكتابة Ctrl+Shift+M على جهاز الكمبيوتر أو Cmd+Shift+M على جهاز Mac، بدلاً من الحاجة إلى زيارة موقعك على جهاز محمول بشكل منفصل!

التقييم

لا check50 لهذه المهمة! وبدلاً من ذلك، سيتم تقييم صحة موقعك بناءً على ما إذا كنت تستوفي متطلبات المواصفات كما هو موضح أعلاه، وما إذا كان HTML الخاص بك جيد الصياغة وصالحًا. للتأكد من أن صفحاتك، يمكنك استخدام هذا خدمة التحقق من صحة العلامات، قم بنسخ ولصق HTML مباشرة في مربع النص المقدم. احرص على إزالة أي تحذيرات أو أخطاء يقترحها المدقق قبل الإرسال!

ضع في اعتبارك أيضًا:

ما إذا كانت جماليات موقعك تجعل من السهل على المستخدم التنقل فيها؛
ما إذا كان قد تم أخذ CSS الخاص بك في الاعتبار في ملف (ملفات) CSS منفصلة؛ و
ما إذا كنت قد تجنبت التكرار والتكرار من خلال خصائص النمط "المتتالية" من العلامات الأصلية.

خائف style50 لا يدعم ملفات HTML، لذا يتعين عليك وضع مسافة بادئة لعلامات HTML ومحاذاتها بشكل واضح. اعلم أيضًا أنه يمكنك إنشاء تعليق HTML باستخدام:

<!-- Comment goes here -->

ولكن التعليق على تعليمات HTML البرمجية الخاصة بك ليس أمرًا ضروريًا كما هو الحال عند التعليق على الشيفرة بلغة C أو Python على سبيل المثال. يمكنك أيضًا التعليق على CSS الخاص بك، في ملفات CSS، باستخدام:

/* Comment goes here */

تلميحات

للحصول على أدلة شاملة إلى حد ما حول اللغات المقدمة في هذه المشكلة، راجع هذه البرامج التعليمية:

كيفية الإرسال

في جهازك الطرفي، قم بتنفيذ ما يلي لإرسال عملك، والإجابة على المطالبات التي تظهر أيضًا.

submit50 cs50/problems/2026/x/homepage

أنهيت التطبيق؟

راجع عناصر التنفيذ أعلاه، ثم احفظ إنجازك وانتقل إلى التمرين التالي.

حفظ إنجاز التمرين

يمكنك قراءة الدورة كاملة دون حساب. يصبح حفظ التقدم متاحًا بعد تفعيل الحساب، ويبقى محفوظًا بعد انتهاء العضوية.

لدي حساب مفعّل ما الذي تضيفه العضوية؟

العودة إلى جميع التمارين