عناصر HTML إضافية

في الأنشطة السابقة، تعلمت ما يلي:

  • أساسيات علامات HTML والعناصر.
  • كيفية هيكلة صفحة ويب.
  • ترميز HTML الدلالي وأفضل الممارسات.

من خلال هذه المقالة، ستستمر في الاستفادة من معرفتك بلغة HTML وتغطية عناصر HTML إضافية.

عناصر المحتوى النصي

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

تدعم هذه العناصر إنشاء محتوى النص وإضافة بنية ونمط ومعنى. هناك أجزاء متعددة من المحتوى النصي يمكن أن تتضمّن العناصر التالية.

عنصر حظر علامة اقتباس

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

يوضّح هذا المثال كيفية استخدام العنصر <blockquote> الذي يعرض اقتباسًا مشهورًا من تأليف "مهاتما غاندي". هناك الكثير من الاقتباسات العظيمة التي تقدم محتوى ومعنًى لا ينسى. فكر في بعض الشخصيات الملهمة المفضلة لديك واقتباساتها.

استخدِم العنصر <blockquote> عند علامات الاقتباس والإشارة إلى المعلومات من مصدر معيّن. ينشئ العنصر <blockquote> مسافة بادئة ومحاذاة فريدة في العرض التقديمي، كما يستخدم علامة فتح وإغلاق. يكون استخدام <blockquote> مفيدًا على وجه الخصوص عند استخدام علامات اقتباس أطول تغطي أسطرًا متعددة من النص.

بإمكانك أيضًا استخدام عناصر مختلفة داخل العنصر <blockquote>، مثل العنوان أو الفقرة أو القائمة.

العنصر <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

غالبًا ما تتضمّن صفحة الويب قسمًا للأسئلة الشائعة ومعلومات إضافية متاحة للمستخدم. تتوفّر أقسام للأسئلة الشائعة شائعة للحصول على معلومات عن المنتجات أو برنامج رحلة السفر أو أي نوع من سيناريوهات الأسئلة والأجوبة.

العنصر <details> مفيد من خلال استخدام أداة تم الإفصاح عنها وتحتوي على معلومات إضافية. يشتمل العنصر على وظيفة تبديل مدمجة ويمكن للمستخدم فتح مفتاح التبديل وإغلاقه. وعندما يكون مفتاح التبديل مفتوحًا، يتم توسيع محتوى المعلومات الإضافية ويمكن للمستخدم قراءته. وعند إغلاق مفتاح التبديل، يتم إخفاء محتوى المعلومات الإضافية عن المستخدم. لتسمية التطبيق المصغّر <details> نفسها، استخدِم العنصر <summary>. 

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

وهذا هو العنصر <figure> قيد التشغيل. نرى الآن أنّ مادة عرض <figure>، التي تم استخدامها مع العنصر <figcaption>، يمكن استخدامها لتحسين التجربة المرئية.

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

العنصر <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

يوفّر العنصر <time> كلاً من المعنى والدلالة، ما يسمح بإجراء وظائف أفضل في أنشطة مثل جدولة موعد على الإنترنت أو نشر تاريخ ووقت لمقالة مدونة أو أرشيفات وما إلى ذلك. تتضمن بعض الأمثلة على المواقع الإلكترونية التي قد تستخدم العنصر <time> استخدام "تقويم Google" أو نشر مقالة مباشرة على إحدى المنصات أو قراءة الأرشيفات التاريخية على الإنترنت من موقع مكتبة إلكتروني.

يشير العنصر <time> إلى الوقت، ويمكن أن يمثّل الوقت بتنسيق 24 ساعة أو تاريخًا محدّدًا يمكن تعديله حسب المنطقة الزمنية والموقع الجغرافي. يتطلب هذا العنصر علامة فتح وإغلاق، بالإضافة إلى <time> و</time>. يمكنك إضافة السمة datetime بحيث يمكن قراءة التواريخ بتنسيق يمكن للآلة قراءته.

البيانات الوصفية للمستند

<title>Sarah's Favorite Food Recipes</title>

عندما تكتب عنوان URL لموقع إلكتروني، يمكن قراءة اسم <title> في شريط المتصفّح أو علامة تبويب صفحة الويب. وهو اسم العنوان الذي تراه لصفحة ويب. هذا العنصر مهم ويستخدمه أحد محركات البحث لعرض قائمة بصفحات الويب ذات الصلة في نتائج البحث. يمكن أن يختلف طول العنوان من قصير ووصفي إلى أطول وأكثر وصفية.

السيناريو: لديك صفحة ويب تفكر فيها، ولكنك لا تستطيع تذكر عنوان URL لموقع الويب المحدد. اكتب الكلمات الرئيسية في محرك بحث. يساعد محرك البحث في تتبع صفحة الويب التي تبحث عنها، ويمكنك عرض اسم <title> الذي يظهر في البحث.

عناصر المحتوى المُضمَّنة

بالإضافة إلى المحتوى النصي، هناك مجموعة متنوّعة من عناصر المحتوى الإضافية التي يمكن استخدامها.

العنصر <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

عند الانتهاء من شراء منتجات على الإنترنت والنقر على خيار الدفع، مثل Paypal أو Apple Pay، تتمّ إضافة هذه الميزات عادةً إلى صفحة ويب باستخدام الرمز <iframe>. تُعد مشاهدة خريطة عبر الإنترنت للبحث عن نشاط تجاري محلي تجربة شائعة أخرى. يمكن إضافة هذه الأنواع من تجارب المستخدمين على صفحة الويب باستخدام إطار iframe. في المثال أعلاه، يظهر لك عنوان URL لويكيبيديا ضمن إطار iframe، بعنوان "Wikipedia".

يتيح لك العنصر <iframe> إدراج محتوى من مصدر آخر وتضمين إطار في صفحة ويب. يقوم بإنشاء إطار مستطيل الشكل ويعرض المحتوى في المتصفح. يتيح الإطار عرض تصميم على شكل نافذة داخل عنصر <iframe>. وهي طريقة فعّالة لإضافة محتوى إلى صفحة الويب لتعزيز تجربة المشاهدة.

عناصر النموذج

<progress max="100" value="30"> 30% </progress>

عند مشاهدة مقطع فيديو أطول أو محاضرة أو ملء طلب شامل، يمكن أن يكون استخدام شريط تقدم مرئي مفيدًا لتتبع تقدمك. يُعد العنصر <progress> مفيدًا لهذه الأنواع من السيناريوهات.

يتم عرض هذا العنصر على شكل شريط مرئي بلون خلفية. يمكن أن يتنوع الشريط المرئي في الحجم ولون الخلفية. من خلال شريط التقدّم، يمكنك استخدام السمتَين max وvalue اختياريًا. تحدّد السمة max رقم النقطة العائمة، وتشير السمة value إلى مستوى التقدّم الذي تم إحرازه في المهمة.

نص الفيديوهات

<canvas id="canvas"></canvas>

ولرسم رسومات وصور متحركة في الوقت الفعلي، استخدِم العنصر <canvas>. ضع العنصر <canvas> في صفحة ويب HTML لإنشاء لوحة رسم. يتطلب هذا العنصر رمز JavaScript للوظيفة التي تتيح رسم الرسومات وإنشائها.

عناصر محتوى الجدول

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

العنصر <table>

ينشئ العنصر <table> جدولاً. هذه هي نقطة البداية لإضافة عناصر إضافية بصفوف وأعمدة. تظهر الجداول غالبًا على صفحات الويب، وهي طريقة مفيدة لتنظيم المعلومات وعرضها. إنّ إحدى حالات استخدام العنصر <table> هي عرض معلومات جدولية للمستخدم، مثل نوع المعلومات التي قد تعثر عليها في جدول البيانات.

العنصر <th>

العنصر <th> هو عنوان لمجموعة من الخلايا.

العنصر <tr>

يحدد العنصر <tr> صفًا من الخلايا داخل جدول. من هنا، يمكنك إضافة بيانات خلية معينة.

العنصر <td>

ينشئ العنصر <td> الخلية، ويضيف المحتوى المطلوب.

الخلاصة

في هذه المقالة، اكتشفت عناصر HTML إضافية وقمت ببناء مهاراتك في الترميز. لقد تعرفت على المزيد حول المحتوى والنص المضمّن والمحتوى المضمّن وعناصر الجدول. لقد بنيت الآن على فهمك لعناصر HTML الإضافية. اتّبِع باستمرار استراتيجيات تساعدك على تحقيق النجاح.