٥. إنشاء صفحة نصائح كوينسي الوظيفية

ورشة عمل

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

نموذج "اتش.تي.إم.إل" The HTML boilerplate.


<!DOCTYPE html>
<html lang="ar" dir="rtl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>نصائح كوينسي للحصول على وظيفة مطور</title>
    </head>

    <body>

	<!-- هنا تضع اكواد التطبيق -->

    </body>

</html>

الخطوة الأولى :

ابدأ بإنشاء عنصر h1 بالنص نصائح كوينسي للحصول على وظيفة مطور.

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

الخطوة الثانية :

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

الكود :


<body>

	<h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
	<p>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.</p>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

الخطوة الثالثة :

في درس سابق تعلمت أن عنصر q يستخدم للتمييز بين النص المقتبس والمحتوى المحيط به.

وهنا مثال:


<p>
 <q>التعلم ممتع!</q>،قالت نانسي
</p>

ستضيف معظم المتصفحات الحديثة علامات اقتباس حول الاقتباس المضمن تلقائيًا عند استخدام عنصر q.

ضع عبارة «يمكنك أن تصبح مطورًا.» داخل عنصر اقتباس مضمَّن in an inline quotation element داخل الفقرة، مع إبقاء باقي الفقرة دون أي تغيير.

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q>.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

الخطوة الرابعة :

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

فيما يلي مثال لعنصر اقتباس مضمن inline quotation element مع سمة `cite`:


<p>
 ،قالت نانسي
 <q cite="https://example.com">التعلم ممتع!</q>
</p>

أضف سمة cite إلى عنصر الاقتباس المضمن باستخدام عنوان URL هذا:

https://www.freecodecamp.org/news/learn-to-code-book/

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

الخطوة الخامسة :

أسفل عنصر الفقرة، أضف عنصر main وقم بتضمين ثلاثة عناصر section بداخله.

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

 <main>
  <section></section>
  <section></section>
  <section></section>
 </main>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

الخطوة السادسة :

داخل عنصر section الأول، أضف عنصر h2 مع النص تصور النجاح.

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

 <main>
  <section>
   <h2>تصور النجاح</h2>
  </section>
  <section></section>
  <section></section>
 </main>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

تصور النجاح

الخطوة السابعة :

أسفل عنصر h2، ستُضيف اقتباسًا آخر لكوينسي. هذه المرة، لن يكون الاقتباس جزءًا من فقرة أكبر، بل ستكون الفقرة بأكملها اقتباسًا. لتمييز النص المقتبس بهذا الشكل، استخدم The block quotation element عنصر الاقتباس الكتلي () : blockquote. في المتصفح، سترى أن النص مُسطر قليلاً.

فيما يلي مثال لعنصر اقتباس كتلة a block quotation element مع نص مقتبس:

			
<blockquote>
 أول شيء يجب أن تفكر فيه بشأن التعليم هو أن هذا قرار اقتصادي.
</blockquote>

الآن، داخل section الأول، أضف عنصر اقتباس كتلة a block quotation element أسفل عنصر h2 بالنص:

هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

 <main>
  <section>
   <h2>تصور النجاح</h2>
   <blockquote>
    هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
   </blockquote>
  </section>
  <section></section>
  <section></section>
 </main>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

تصور النجاح

الخطوة الثامنة :

تمامًا مثل عنصر الاقتباس المضمن inline quotation element ، يمكنك أيضًا إضافة سمة cite إلى عنصر اقتباس الكتلة a block quotation element .

فيما يلي مثال لعنصر اقتباس كتلة a block quotation element مع سمة `cite`:


<blockquote cite="https://www.freecodecamp.org/news/is-college-worth-it/">
 أول شيء يجب أن تفكر فيه بشأن التعليم هو أن هذا قرار اقتصادي.
</blockquote>

الآن، أضف سمة cite إلى عنصر اقتباس الكتلة the block quotation element مع عنوان URL

https://www.freecodecamp.org/news/learn-to-code-book/

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

 <main>
  <section>
   <h2>تصور النجاح</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
   </blockquote>
  </section>
  <section></section>
  <section></section>
 </main>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

تصور النجاح

الخطوة التاسعة :

أسفل عنصر اقتباس الكتلة the block quotation element ، أضف عنصر فقرة بالنص

- كوينسي لارسون، كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل].

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

 <main>
  <section>
   <h2>تصور النجاح</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
   </blockquote>
   <p>  كوينسي لارسون، كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]-</p>
  </section>
  <section></section>
  <section></section>
 </main>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

تصور النجاح

- كوينسي لارسون، كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]

الخطوة العاشرة :

حتى الآن كنت تستخدم سمة cite لإسناد مصدر الاقتباس، ولكن السمة لا تظهر المصدر للمستخدم حقًا.

إذا كنت ترغب في الإشارة إلى المصدر بصريًا، يمكنك إضافة عنصر استشهاد، cite، خارج عنصر الاقتباس المحظور. عنصر الاستشهاد The citation element هو عنصر HTML يمكنك استخدامه لتحديد عنوان عمل إبداعي مرجعي، مثل كتاب، أو مقال، أو أغنية، أو فيلم، أو موقع إلكتروني، أو بحث.

وهنا مثال:


<div>
 <blockquote cite="https://www.freecodecamp.org/news/is-college-worth-it/">
 أول شيء يجب أن تفكر فيه بشأن التعليم هو أن هذا قرار اقتصادي.
 </blockquote>
 <p><cite>هل ما زالت الدراسة الجامعية تستحق العناء؟ نصائح من خبرتي في تعليم الكبار لمدة ٢٠ عامًا</cite>،كوينسي لارسون—</p>
</div>

داخل عنصر p الموجود أسفل عنصر اقتباس الكتلة the block quotation element ، قم بتغليف كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل] في عنصر cite.

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

 <main>
  <section>
   <h2>تصور النجاح</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
   </blockquote>
   <p><cite>كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]</cite>،كوينسي لارسون—</p>
  </section>
  <section></section>
  <section></section>
 </main>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

تصور النجاح

- كوينسي لارسون، كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]

الخطوة 11 :

داخل عنصر section الثاني، قم بتضمين عنصر h2 مع النص أهمية الشبكات.

أسفل هذا العنوان، أضف عنصر اقتباس كتلة a block quotation element مع سمة cite بقيمة

https://www.freecodecamp.org/news/learn-to-code-book/

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

 <main>
  <section>
   <h2>تصور النجاح</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
   </blockquote>
   <p><cite>كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]</cite>،كوينسي لارسون—</p>
  </section>
  <section>
   <h2>أهمية الشبكات</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
   </blockquote>
  </section>
  <section></section>
 </main>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

تصور النجاح

- كوينسي لارسون، كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]

أهمية الشبكات

الخطوة 12 :

يمكنك كتابة النص المقتبس مباشرةً داخل عنصر الاقتباس the block quotation element ، كما فعلت في عنصر section الأول. أو يمكنك دمجه داخل فقرة واحدة أو أكثر. هذا مفيد عندما يحتوي النص على فقرات متعددة، ولكنك ترغب في الاحتفاظ بها داخل نفس عنصر الاقتباس the same block quotation element .

فيما يلي مثال مكون من فقرتين:


<blockquote cite="https://www.freecodecamp.org/news/is-college-worth-it/">
 <p>يسألني الكثيرون أسبوعيًا: هل ما زالت الدراسة الجامعية تستحق العناء؟ في هذا الفيديو، الذي مدته ساعة، أجيب على هذا السؤال وأسئلة شائعة أخرى حول الجامعة.</p>
 <p>لقد عملت في مجال التعليم للبالغين لمدة عقدين من الزمن حتى هذه النقطة، وعلى الرغم من أنني لست خبيراً اقتصادياً في سوق العمل، إلا أنني أشعر بالثقة الكافية للإجابة على هذه الأسئلة.</p>
</blockquote>

في section الثاني، داخل عنصر اقتباس الكتلة the block quotation element الموجود، أضف أربعة عناصر p مع النصوص التالية بالترتيب:

1. يعتمد الحصول على وظيفة بشكل كبير على معارفك.
2. لا بأس أن تكون انطوائيًا، لكن عليك أن تتجاوز حدودك.
3. أنشئ حسابات على GitHub ,Twitter, LinkedIn, Discord.
4. احضر اللقاءات والمؤتمرات التقنية. سافر إذا اضطررت.

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

 <main>
  <section>
   <h2>تصور النجاح</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
   </blockquote>
   <p><cite>كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]</cite>،كوينسي لارسون—</p>
  </section>
  <section>
   <h2>أهمية الشبكات</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    <p>يعتمد الحصول على وظيفة بشكل كبير على معارفك.</p>
    <p>لا بأس أن تكون انطوائيًا، لكن عليك أن تتجاوز حدودك.</p>
    <p>.GitHub ,Twitter, LinkedIn, Discordأنشئ حسابات على</p>
    <p>احضر اللقاءات والمؤتمرات التقنية. سافر إذا اضطررت.</p>
   </blockquote>
  </section>
  <section></section>
 </main>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

تصور النجاح

- كوينسي لارسون، كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]

أهمية الشبكات

الخطوة الأخيرة :

في عنصر section الثالث والأخير، سوف تقوم بإنشاء نفس هيكل HTML كما فعلت في القسم السابق.

أولاً، داخل section الأخير، أضف عنصر h2 مع النص أهمية بناء السمعة.

ثم، أسفل عنصر h2، أضف عنصر اقتباس كتلة a block quotation element مع تعيين سمة cite إلى

https://www.freecodecamp.org/news/learn-to-code-book/

أخيرًا، قم بتضمين ثلاثة عناصر فقرة داخل عنصر اقتباس الكتلة the block quotation element مع النصوص التالية، بالترتيب:

1. شارك بعروض فيديو قصيرة لمشاريعك.
2. واظب على التقديم للتحدث في مؤتمرات أكبر فأكبر.
3. انضم إلى جلسات الهاكرز وساعد مَن هم أحدث منك في البرمجة.

الكود :


<body>

 <h1>نصائح كوينسي للحصول على وظيفة مطور.</h1>
 <p><q cite="https://www.freecodecamp.org/news/learn-to-code-book/">.يمكنك أن تصبح مطورًا</q>تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون،</p>

 <main>
  <section>
   <h2>تصور النجاح</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
   </blockquote>
   <p><cite>كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]</cite>،كوينسي لارسون—</p>
  </section>
  <section>
   <h2>أهمية الشبكات</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    <p>يعتمد الحصول على وظيفة بشكل كبير على معارفك.</p>
    <p>لا بأس أن تكون انطوائيًا، لكن عليك أن تتجاوز حدودك.</p>
    <p>.GitHub ,Twitter, LinkedIn, Discordأنشئ حسابات على</p>
    <p>احضر اللقاءات والمؤتمرات التقنية. سافر إذا اضطررت.</p>
   </blockquote>
  </section>
  <section>
   <h2>أهمية بناء السمعة</h2>
   <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
    <p>شارك بعروض فيديو قصيرة لمشاريعك.</p>
    <p>واظب على التقديم للتحدث في مؤتمرات أكبر فأكبر.</p>
    <p>انضم إلى جلسات الهاكرز وساعد مَن هم أحدث منك في البرمجة.</p>
   </blockquote>
  </section>
 </main>

</body>

نصائح كوينسي للحصول على وظيفة مطور.

تعلم البرمجة صعب، ولكن كما يقول كوينسي لارسون، يمكنك أن تصبح مطورًا.

تصور النجاح

- كوينسي لارسون، كيفية تعلم البرمجة والحصول على وظيفة مطور [الكتاب الكامل]

أهمية الشبكات

أهمية بناء السمعة

مبروك! لقد أنهيتم هذه الورشة.

→ السابق التالي ←

٥. إنشاء صفحة نصائح كوينسي الوظيفية

نموذج "اتش.تي.إم.إل" The HTML boilerplate.

الخطوة الأولى :

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

الخطوة الثانية :

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

الخطوة الثالثة :

وهنا مثال:

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

الخطوة الرابعة :

فيما يلي مثال لعنصر اقتباس مضمن inline quotation element مع سمة cite:

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

الخطوة الخامسة :

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

الخطوة السادسة :

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

تصور النجاح

الخطوة السابعة :

فيما يلي مثال لعنصر اقتباس كتلة a block quotation element مع نص مقتبس:

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

تصور النجاح

الخطوة الثامنة :

فيما يلي مثال لعنصر اقتباس كتلة a block quotation element مع سمة cite:

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

تصور النجاح

الخطوة التاسعة :

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

تصور النجاح

الخطوة العاشرة :

وهنا مثال:

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

تصور النجاح

الخطوة 11 :

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

تصور النجاح

أهمية الشبكات

الخطوة 12 :

فيما يلي مثال مكون من فقرتين:

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

تصور النجاح

أهمية الشبكات

الخطوة الأخيرة :

الكود :

نصائح كوينسي للحصول على وظيفة مطور.

تصور النجاح

أهمية الشبكات

أهمية بناء السمعة

مبروك! لقد أنهيتم هذه الورشة.

فيما يلي مثال لعنصر اقتباس مضمن inline quotation element مع سمة `cite`:

فيما يلي مثال لعنصر اقتباس كتلة a block quotation element مع سمة `cite`: