الاثنين، 6 ديسمبر 2021

العناصر الدلالية HTML Semantic Elements

الدرس السابق الدرس التالي
العناصر الدلالية  HTML Semantic Elements 
 العناصر الدلالية هي العناصر ذات المعنى.
ما هي العناصر الدلالية؟What are Semantic Elements
يصف  العنصر الدلالي  لكل من المتصفح والمطور معناه  .
أمثلة على العناصر غير الدلالية: <div> و <span> - لا تخبر شيئًا عن محتواها هي عبارة عن حاوية فقط.
أمثلة على العناصر الدلالية: <form> و <table>  و <article> - تحدد محتوياتها بوضوح  مثل هذا جدول هذا مقال هذا نموذج ادخال البيانات وهكذا.
العناصر الدلالية Semantic Elements in HTML
تحتوي العديد من مواقع الويب على كود HTML مثل: <"div id = "nav"> <div class = "header"> <div id = "footer"> للإشارة إلى التنقل والعنوان والتذييل.
توجد في HTML بعض العناصر الدلالية التي يمكن استخدامها لتحديد أجزاء مختلفة من صفحة الويب:
  • <article>         المعنى      <مقالة>
  • <aside>           المعنى      <جانب>
  • <details>        المعنى      <التفاصيل>
  • <figcaption>  المعنى      <لتحديد تسمية توضيحية للصورة او عنصر>
  • <figure>         المعنى      <تكوين>
  • <footer>         المعنى     <تذييل> 
  • <header>        المعنى     <رأس الصفحة>
  • <main>          المعنى     <قائمة رئيسية>
  • <mark>          المعنى    <علامة>
  • <nav>            المعنى    <قائمة روابط>
  • <section>      المعنى    <القسم>
  • <summary>  المعنى    <ملخص>
  • <time>          المعنى    <الوقت>
عنصر <section>  في HTML
يحدد العنصر <section> قسمًا في الصفحة.
وفقًا لوثائق HTML الخاصة بـ W3C: "القسم هو تجميع موضوعي للمحتوى ، عادةً مع عنوان."
أمثلة على مكان استخدام عنصر <section>:
  • فصول
  • مقدمة
  • الاخبار
  • معلومات للتواصل
يمكن عادةً تقسيم صفحة الويب إلى أقسام للمقدمة والمحتوى ومعلومات الاتصال.
مثال
قسمان في الصفحة: 
<!DOCTYPE html>
<html>
<body dir="rtl">

<section>
  <h1>تصميم المواقع </h1>
  <p>تصميم المواقع هو عملية تخطيط وتنفيذ محتويات متعددة الوسائط عبر الشبكة (الإنترنت )، بواسطة أنماط التقنيات كلغات التوصيف المناسبة للعرض على متصفحات الإنترنت أو بقية واجهات المستخدم المبنية في الإنترنت.</p>
</section>

<section>
  <h1>الأساسيات التي يقوم عليها أى موقع إنترنت </h1>
  <p>يتكون أى موقع على الإنترنت من ثلاث عناصر أساسية (اسم الموقع و عنوانه - الخادم الذي يوضع عليه ملفات الموقع - ملفات الموقع نفسه التي تعرض للمستخدم). تتطلب عملية تصميم أى موقع التعامل مع هذه العناصر الثلاث لأنها تكمل بعضها ليظهر الموقع على الإنترنت في النهاية..</p>
</section>

</body>
</html>
عنصر <article> في HTML
يحدد العنصر <article> محتوى مستقلًا قائمًا بذاته.
يجب أن يكون للمقال معنى من تلقاء نفسه ، ويجب أن يكون من الممكن توزيعه بشكل مستقل عن باقي موقع الويب.
أمثلة على مكان استخدام العنصر <article>:
  • مشاركات المنتدى
  • مشاركات المدونة
  • تعليقات المستخدم
  • بطاقات المنتجات
  • مقالات الصحف
مثال
ثلاث مقالات بمحتوى مستقل ومستقل: 
<!DOCTYPE html>
<html>
<body dir="rtl" style="font-family:tahoma;">

<h1> عنصر المقالة (article element)</h1>

<article>
  <h2>Google Chrome</h2>
  <p> Google Chrome هو متصفح ويب تم تطويره بواسطة Google ، وتم إصداره في عام 2008. Chrome هو متصفح الويب الأكثر شعبية في العالم اليوم!!</p>
</article>

<article>
  <h2>Mozilla Firefox</h2>
  <p>Mozilla Firefox هو متصفح ويب مفتوح المصدر تم تطويره بواسطة Mozilla. كان Firefox ثاني أكثر مستعرضات الويب شهرة منذ يناير 2018..</p>
</article>

<article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge هو متصفح ويب تم تطويره بواسطة Microsoft ، وتم إصداره في عام 2015. وقد حل Microsoft Edge محل Internet Explorer..</p>
</article>

</body>
</html>
هل تتداخل <article> في <section> أو العكس ؟
يحدد العنصر <article> محتوى مستقلًا قائمًا بذاته.
يحدد عنصر <section> القسم في الصفحة.
هل يمكننا استخدام التعريفات لنقرر كيفية تداخل هذه العناصر؟ لا لانستطيع!
لذلك ، ستجد صفحات HTML بها عناصر <section> تحتوي على عناصر <article> ، و <article> تحتوي على عناصر <section>.
عنصر <header> في html
يمثل العنصر <header> حاوية لمحتوى تمهيدي أو مجموعة من روابط التنقل.
يحتوي عنصر <header> عادةً على:
  • عنصر عنوان واحد أو أكثر من (<h1> - <h6>)
  • شعار أو رمز
  • معلومات التأليف
ملاحظة: يمكن أن يكون لديك عدة عناصر <header> في صفحةHTML . ومع ذلك ، لا يمكن وضع <header> داخل <footer> أو <address> أو عنصر <header> آخر.
مثال
عنوان <article>: 
<!DOCTYPE html>
<html>
<body dir="rtl" style="font-family:tahoma">

<article>
  <header>
    <h1>Google Chrome هو متصفح ويب </h1>
    <p>جوجل كروم:</p>
  </header>
  <p>Google Chrome هو متصفح ويب تم تطويره بواسطة Google ، وتم إصداره في عام 2008. Chrome هو متصفح الويب الأكثر شعبية في العالم اليوم!</p>
</article>

</body>
</html>
عنصر <footer> في HTML
يحدد العنصر <footer> تذييلًا لمستند أو قسم.
عادةً ما يحتوي عنصر <footer> على:
  • معلومات التأليف
  • معلومات حقوق التأليف والنشر
  • معلومات للتواصل
  • خريطة الموقع
  • العودة إلى أعلى الروابط
  • الوثائق ذات الصلة
يمكن أن يكون لديك عدة عناصر <footer> في صفحة واحدة.
مثال
مقطع تذييل في مستند: 
<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

</body>
</html>
عنصر <nav> في HTML 
يحدد العنصر <nav> مجموعة من روابط التنقل.
لاحظ أنه لا يجب أن تكون جميع روابط الصفحة داخل عنصر <nav>. عنصر <nav> مخصص فقط للكتلة الرئيسية لروابط التنقل.
يمكن للمتصفحات ، مثل برامج قراءة الشاشة للمستخدمين المعوقين ، استخدام هذا العنصر لتحديد ما إذا كان سيتم حذف العرض الأولي لهذا المحتوى.
مثال
مجموعة روابط التنقل: 
<!DOCTYPE html>
<html>
<body>

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

</body>
</html>
عنصر <aside> في HTML 
يحدد العنصر <aside> بعض المحتوى بصرف النظر عن المحتوى الذي تم وضعه فيه (مثل الشريط الجانبي).
يجب أن يكون المحتوى <aside> مرتبطًا بشكل غير مباشر بالمحتوى المحيط.
مثال
اعرض بعض المحتوى  من المحتوى الذي تم وضعه فيه: 
<!DOCTYPE html>
<html>
<body dir="rtl" style="font-family:tahoma">

<p>زرت أنا وعائلتي مركز The Epcot هذا الصيف. كان الطقس لطيفًا ، وكانت Epcot رائعة! قضيت صيفًا رائعًا مع عائلتي!</p>

<aside>
  <h4>منتزه ترفيهي</h4>
  <p>منتزه ترفيهي في منتجع والت ديزني وورلد يضم معالم جذب مثيرة وأجنحة دولية وألعاب نارية حائزة على جوائز ومناسبات موسمية خاصة.</p>
</aside>

</body>
</html>
عناصر  <figure> و <figcaption> في HTML 
تحدد علامة <figure> المحتوى المستقل ، مثل الرسوم التوضيحية والرسوم البيانية والصور وقوائم الرموز وما إلى ذلك.
تحدد العلامة <figcaption> تسمية توضيحية لعنصر <figure>. يمكن وضع عنصر <figcaption> باعتباره العنصر الأول أو الأخير لعنصر <figure>.
يحدد العنصر <img> الصورة / الرسم التوضيحي الفعلي.
مثال
<!DOCTYPE html>
<html>
<base href="https://www.w3schools.com/html/" />
<body dir="rtl" style="font-family:tahoma">

<h2>اماكن للزيارة</h2>

<p>من أشهر معالم بوليا المنازل المخروطية الفريدة (ترولي) الموجودة في المنطقة المحيطة بألبيروبيلو ، وهي أحد مواقع التراث العالمي لليونسكو.</p>

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

</body>
</html>
لماذا العناصر الدلالية؟
وفقًا لـ W3C: "تسمح شبكة الويب الدلالية بمشاركة البيانات وإعادة استخدامها عبر التطبيقات والمؤسسات والمجتمعات."
الدرس السابق الدرس التالي
مرسلة بواسطة في
التسميات:

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)