0Pricing
Frontend Academy · درس

النصوص والصور والروابط والقوائم

نسّق النص بالعناوين والفقرات، وضمّن الصور بنص alt، وأنشئ الارتباطات التشعبية والقوائم المرتبة وغير المرتبة.

النصوص والصور والروابط والقوائم درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

العناوين: من h1 إلى h6

يوفر HTML ستة مستويات للعناوين. استخدمها لإنشاء مخطط للمستند، لا لتغيير حجم النص. يمثّل <h1> عنوان الصفحة (مرة واحدة لكل صفحة)، ويُستخدم <h2> للأقسام الرئيسية، و<h3> للأقسام الفرعية، وهكذا.

<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>

الفقرات و&lt;br&gt;

يحيط عنصر <p> بفقرة من النص. يضيف المتصفح مسافات أعلى الفقرة وأسفلها تلقائيًا. استخدم <br> باعتدال — فقط لفواصل الأسطر ذات المعنى، مثل تلك الموجودة في عنوان أو قصيدة، وليس لإضافة مسافات بين الفقرات.

عناصر النص داخل السطر

استخدم العناصر داخل السطر لمنح النص معنى: <strong> للنص المهم (عريض)، و<em> للتأكيد (مائل)، و<code> لمقاطع التعليمات البرمجية، و<mark> للنص المميز، و<small> للنصوص الدقيقة.

<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>

الصور: عنصر &lt;img&gt;

يضمّن عنصر <img> صورةً. تحدد السمة src عنوان URL، وتوفر alt نصًا بديلًا لقارئات الشاشة وعندما يتعذر تحميل الصورة. احرص دائمًا على تضمين قيمة alt ذات معنى.

<img src="/images/hero.webp"
     alt="A developer typing code on a laptop"
     width="800"
     height="450">

كتابة نص بديل جيد

ينبغي أن ينقل النص البديل محتوى الصورة والغرض منها. تستخدم الصور الزخرفية (الفواصل والأيقونات المخصصة للزينة فقط) السمة alt="" (سلسلة فارغة) كي تتجاوزها قارئات الشاشة. لا تكتب مطلقًا alt="image of" — بل صف ما تعرضه الصورة فحسب.

الارتباطات التشعبية: عنصر &lt;a&gt;

ينشئ عنصر <a>(الرابط) ارتباطات تشعبية. تحدد السمة href عنوان URL للوجهة. يجب أن يصف نص الرابط الوجهة — لا تكتب مطلقًا «انقر هنا».

<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

<!-- Internal link -->
<a href="/courses">Browse Courses</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>

ملاحظة أمنية حول target=_blank

عند فتح الروابط في علامة تبويب جديدة باستخدام target="_blank"، أضف دائمًا rel="noopener noreferrer". فمن دونه، يمكن للصفحة المفتوحة الوصول إلى كائن نافذة الصفحة الفاتحة، ما يسبب ثغرة أمنية تُسمى reverse tabnapping.

القوائم غير المرتبة: &lt;ul&gt;

استخدم <ul> (قائمة غير مرتبة) عندما لا يهم ترتيب العناصر، مثل الميزات أو المكونات أو روابط التنقل. يكون كل عنصر عبارة عن <li>. يعرض المتصفح النقاط تلقائيًا، لكنك ستنسّقها في معظم الحالات باستخدام CSS.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

القوائم المرتبة: &lt;ol&gt;

استخدم <ol> (قائمة مرتبة) عندما يكون الترتيب مهمًا، مثل خطوات درس تعليمي أو تصنيفات أو تعليمات. تُرقّم العناصر تلقائيًا. استخدم السمَتين start وreversed للتحكم في الترقيم.

<ol>
  <li>Install Node.js</li>
  <li>Create a new project</li>
  <li>Run npm install</li>
</ol>

قوائم الأوصاف: &lt;dl&gt;

تجمع <dl> (قائمة أوصاف) المصطلحات وتعريفاتها أو أوصافها. استخدمها في المسارد والبيانات الوصفية (المؤلف/التاريخ) وأزواج المفتاح والقيمة. يمثّل <dt> المصطلح، وتمثّل <dd> الوصف.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure layer.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>

تداخل القوائم

يمكن تداخل القوائم لتمثيل التسلسلات الهرمية. ضع القائمة الفرعية <ul> أو <ol> داخل عنصر <li> الأب. لا تستخدم التداخل لمجرد إضافة مسافة بادئة — استخدم CSS بدلًا من ذلك.

اختبار سريع

أي سمة توفر وصفًا نصيًا للصورة لقارئات الشاشة؟

مراجعة: النصوص والصور والروابط والقوائم

استخدم عناصر العناوين لبنية المستند، وp للفقرات، وimg مع نص alt ذي معنى للصور، وa مع نصوص روابط وصفية للتنقل، وul/ol/dl لمحتوى القوائم. تجعل الدلالات HTML سهل الوصول وقابلًا للقراءة آليًا.

الأسئلة الشائعة

هل درس «النصوص والصور والروابط والقوائم» مجاني؟

نعم — نص درس «النصوص والصور والروابط والقوائم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «النصوص والصور والروابط والقوائم»؟

نسّق النص بالعناوين والفقرات، وضمّن الصور بنص alt، وأنشئ الارتباطات التشعبية والقوائم المرتبة وغير المرتبة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «النصوص والصور والروابط والقوائم»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. بنية المستند: DOCTYPE وhtml وhead وbody
  2. الوسوم الدلالية: header وnav وmain وarticle وfooter
  3. النصوص والصور والروابط والقوائم
  4. النماذج: input وlabel وbutton
← العودة إلى Frontend Academy