From ffc9243fd4290c02f95d2b2e017d00baebc43e70 Mon Sep 17 00:00:00 2001 From: d3j1x Date: Tue, 16 Dec 2025 16:00:59 +0100 Subject: [PATCH] =?UTF-8?q?=D9=A9.=20=D9=85=D8=B1=D8=A7=D8=AC=D8=B9=D8=A9?= =?UTF-8?q?=20=D8=A7=D8=AA=D8=B4.=D8=AA=D9=8A.=D8=A5=D9=85.=D8=A5=D9=84=20?= =?UTF-8?q?=D8=A7=D9=84=D8=AF=D9=84=D8=A7=D9=84=D9=8A=D8=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- semantic/semantic9.html | 213 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 209 insertions(+), 4 deletions(-) diff --git a/semantic/semantic9.html b/semantic/semantic9.html index 20a61e5..42a146f 100644 --- a/semantic/semantic9.html +++ b/semantic/semantic9.html @@ -26,21 +26,226 @@

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

- -
+ +

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

مراجعة -

قريبا

+

+

أهمية 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>
+
    + + +
-
+