X

اتش.تي.إم.إل الدلالية

٩. مراجعة اتش.تي.إم.إل الدلالية

مراجعة

أهمية HTML الدلالية

  • التسلسل الهرمي الهيكلي Structural hierarchy لعناصر العناوين: من المهم استخدام عنصر العنوان heading element الصحيح للحفاظ على التسلسل الهرمي للمحتوى. عنصر h1 هو أعلى مستوى من العناوين، بينما عنصر h6 هو أدنى مستوى.
  • عناصر "اتش.تي.إم.إل" للعرض Presentational HTML : العناصر التي تحدد مظهر المحتوى. مثال: عناصر center و big و font التي تم إيقاف استخدامها.
  • عناصر "اتش.تي.إم.إل" الدلالية Semantic HTML : العناصر التي تحمل معنى meaning وبنية structure . مثال: header و nav و figure.

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

  • عنصر الرأس Header : يُستخدم لتحديد رأس المستند the header of a document أو القسم section .
    • 
<header>
 <h1>تطبيق صور القطط</h1>
 <p>أهلاً بكم في معرض صور القطط الخاص بنا.</p>
</header>

  • العنصر الرئيسي Main : يستخدم لاحتواء المحتوى الرئيسي the main content لصفحة الويب.
    • 
<main>
 <section>
  <h2>صور القطط</h2>
  <p>تصفح صور القطط الرائعة.</p>
 </section>
</main>

  • عنصر القسم Section : يستخدم لتقسيم to divide المحتوى إلى أقسام أصغر into smaller sections .
    • 
<section>
 <h2>نبذة عنّي</h2>
 <p>مرحباً، أنا "شهاب"، وأنا مطور مواقع ويب.</p>
</section>

  • عنصر قسم التنقل (nav) Navigation Section : يمثل هذا القسم روابط تنقل navigation links .
    • 
<nav>
 <ul>
  <li><a href="#photos">صور</a></li>
  <li><a href="#videos">فيديوهات</a></li>
 </ul>
</nav>

  • عنصر الشكل Figure : يحتوي على رسومات توضيحية illustrations ومخططات diagrams .
    • 
<figure>
 <img
  src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
  alt=".قطتان صغيرتان تنامان معًا على أريكة"
 />
</figure>

  • عنصر التأكيد (em) Emphasis : يُشير إلى النص الذي يحتوي على نبرة تأكيد stress emphasis .
    • 
<p>
 <em>.أحلامك</em> لا تتخلى أبدًا عن
</p>

  • عنصر النص الاصطلاحي (i) Idiomatic Text : يستخدم لتسليط الضوء على الصوت أو الحالة المزاجية البديلة، والمصطلحات الاصطلاحية من لغة أخرى، والمصطلحات التقنية، والأفكار.
    • 
<p>
 .في الهواء<i lang="en"> I don't know what </i>هناك شيء معين
</p>

    تُستخدم السمة lang داخل وسم i المفتوح لتحديد لغة المحتوى. في هذه الحالة، ستكون اللغة هي الانجليزية. لا يُشير عنصر i إلى أهمية النص، بل يُظهر فقط أنه مختلف نوعًا ما عن النص المحيط به.


  • عنصر ذو أهمية بالغة (strong) Strong Importance : يشير إلى النص ذي الأهمية الكبيرة has strong importance .
    • 
<p>
 .قد يسبب هذا المنتج ردود فعل تحسسية <strong>:تحذير</strong>
</p>

  • عنصر "لفت الانتباه إلى" (b) Bring Attention To : يُستخدم هذا الأسلوب لتسليط الضوء على النصوص غير المهمة لمعنى المحتوى. ويُستخدم عادةً لتسليط الضوء على الكلمات المفتاحية في الملخصات أو أسماء المنتجات في المراجعات.
    • 
<p>
 .لجودة الصوت <b>SuperSound 3000</b> لقد قمنا باختبار العديد من المنتجات، بما في ذلك 
</p>

  • عنصر قائمة الوصف (dl) Description List : يستخدم لتمثيل قائمة من مجموعات المصطلحات والأوصاف.
  • عنصر مصطلح الوصف (dt) Description Term : يستخدم لتمثيل المصطلح الذي يتم تعريفه.
  • عنصر تفاصيل الوصف (dd) Description Details : يستخدم لتمثيل وصف المصطلح.
    • 
<dl>
	<dt>HTML اتش.تي.إم.إل</dt>
	<dd>HyperText Markup Language لغة ترميز النص الفائق</dd>
	<dt>CSS سي.أس.أس</dt>
	<dd>Cascading Style Sheets أوراق الأنماط المتتالية</dd>
</dl>

  • عنصر الاقتباس المجمّع (blockquote) Block Quotation : يُستخدم هذا العنصر لتمثيل مقطع مقتبس من مصدر آخر. ويحتوي على سمة cite ، وقيمتها هي عنوان URL للمصدر.
    • 
<blokquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
 "هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟"
</blockquote>

  • عنصر الاقتباس (cite) Citation : تُستخدم هذه العلامة لنسب مصدر العمل المرجعي بصريًا. وتُستخدم أيضًا لتمييز عنوان المرجع.
    • 
<div>
 
 <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
  هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
 </blockquote>

 <p>—Quincy Larson, <cite>كيفية تعلم البرمجة والحصول على وظيفة مطور برامج [كتاب كامل].</cite></p>

</div>

  • عنصر الاقتباس المضمن (q) Inline Quotation : يستخدم لتمثيل اقتباس قصير ضمن النص.
    • 
<p>
  ،كما قال كوينسي لارسون
 <q cite="https://www.freecodecamp.org/news/learn-to-code-book/">
  .الزخم هو كل شيء
 </q>
</p>

  • عنصر الاختصار (abbr) Abbreviation : يُستخدم لتمثيل اختصار أو رمز مختصر. ولمساعدة المستخدمين على فهم معنى الاختصار أو الرمز المختصر، يمكنك عرض شكله الكامل، ووصفًا سهل القراءة، باستخدام سمة title.
    • 
<p>
 هو أساس الويب<abbr title="HyperText Markup Language">HTML</abbr>
</p>

  • عنصر عنوان الاتصال (address) Contact Address : يستخدم لتمثيل معلومات الاتصال.

  • عنصر التاريخ الوقت (time) Date Time : يستخدم لتمثيل التاريخ و/أو الوقت. تُستخدم سمة datetime لترجمة التواريخ والأوقات إلى تنسيق قابل للقراءة آليًا.
    • 
<p> الحجوزات مخصصة لـ <time datetime="20:00">20:00</time></p>

  • سمة التاريخ (datetime) وفقًا لمعيار ISO 8601 : يُستخدم لتمثيل التواريخ والأوقات بتنسيق قابل للقراءة آليًا. التنسيق القياسي هو YYYY-MM-DDThh:mm:ss ، حيث يُمثل الحرف T الكبير فاصلًا بين التاريخ والوقت.

  • عنصر مرتفع (sup) Superscript : يُستخدم لتمثيل النص المرتفع. تشمل حالات الاستخدام الشائعة لعنصر sup الأسس، والأحرف المرتفعة، والأعداد الترتيبية.
    • 
<p>.4 يساوي<sup>2</sup>2</p>

  • عنصر منخفض (sub) Subscript : يستخدم لتمثيل النص السفلي. تشمل حالات الاستخدام الشائعة لعنصر النص السفلي الصيغ الكيميائية والحواشي السفلية والرموز السفلية للمتغيرات.
    • 
<p>CO<sub>2</sub></p>

  • عنصر الكود المضمن (code) Inline Code : يُستخدم لتمثيل جزء من شفرة الحاسوب.
  • عنصر نص منسق مسبقًا (pre) Preformatted Text : يمثل نصًا منسقًا مسبقًا.
    • 
<pre>
 <code>
  body {
   color: red;
  }
 </code>
</pre>

  • عنصر تعليق غير مفصل (u) Unarticulated Annotation : يُستخدم لتمثيل نطاق من النص المضمن الذي يجب عرضه بطريقة تشير إلى أنه يحتوي على تعليق غير نصي.
    • 
<p>
 يمكنك استخدام عنصر التعليق غير المفصلي للتمييز
 <u>inccccort</u> <u>spling</u> <u>issses</u>.
</p>

  • عنصر شرح روبي (ruby) Ruby Annotation : تُستخدم هذه الأداة لإضافة تعليقات توضيحية للنصوص تتضمن شرحاً للنطق أو المعنى. ومن الأمثلة على استخدامها في الطباعة في شرق آسيا.
  • عنصر الأقواس الاحتياطي في روبي (rp) Ruby fallback parenthesis : يُستخدم كخيار احتياطي للمتصفحات التي تفتقر إلى دعم عرض التعليقات التوضيحية للغة روبي.
  • عنصر نص روبي (rt) Ruby text : يُستخدم للإشارة إلى نص التعليق التوضيحي في لغة روبي. ويُستخدم عادةً للنطق أو تفاصيل الترجمة في الطباعة في شرق آسيا.
    • 
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>

  • عنصر الشطب (s) Strikethrough : يُستخدم لتمثيل المحتوى الذي لم يعد دقيقًا أو ذا صلة.
    • 
<p>
 <s>.ستبدأ رحلة المشي غداً عند الظهر</s>
</p>
<p>
 .نظراً لظروف جوية غير متوقعة، تم إلغاء الرحلة
</p>

  • الروابط الداخلية Internal links : يُستخدم هذا الأسلوب للربط بقسم آخر من الصفحة باستخدام href="#id" على عنصر a ومنح العنصر الوجهة نفس المعرّف id . ويُستخدم عادةً للروابط السريعة، وجداول المحتويات، أو الصفحات الطويلة ذات الأقسام المتعددة.
    • 
<a href="#about-section">."انتقل إلى قسم "نبذة عنا</a>

<section id="about-section">
 <h2>نبذة عنا<h2>
 <p>.هذا هو قسم "نبذة عنا" في الصفحة<p>
</section>