عناصر 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، بعنوان "ويكيبيديا".

يتيح لك العنصر <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 الإضافية. اتّبِع باستمرار استراتيجيات تساعدك على تحقيق النجاح.