Merge pull request #39 from d3j1x/main

تحديث

Author: d3j1x

assets/HTMLverse500.png

@@ -7,6 +7,8 @@
     <title>HTMLverse | عالم اتش.تي.إم.إل</title>
     <meta name="description" content="مشروع HTMLverse لتعليم لغة HTML بالعربية بطريقة بسيطة ومجانية. تعلم أساسيات تطوير الويب خطوة بخطوة.">
     <meta name="version" content="0.0.1">
+    <link rel="manifest" href="/site.webmanifest">
+    <meta name="theme-color" content="#0d6efd">
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

index.html

@@ -31,20 +31,68 @@ <h1>اتش.تي.إم.إل الدلالية</h1>
 	<div class="sub-title">
 		<h2>١. أهمية اتش.تي.إم.إل الدلالية</h2>
 		<span class="hint">نظري</span>
-        <p>قريبا</p>
+        <p></p>
 	</div>
 
 	<section id="1">
+		<h3>أ. لماذا يجب أن تهتم بلغة اتش.تي.إم.إل الدلالية Semantic HTML ؟</h3>
+		
+		<p>الدلالات <em>Semantics</em> هي معاني الكلمات أو العبارات في لغة ما. في "اتش.تي.إم.إل" <em>HTML</em>، وهي لغة، للعناصر لها دلالاتها <strong>Semantic</strong> الخاصة أيضًا. في الواقع، يمكنك اعتبار مستند "اتش.تي.إم.إل" <em>HTML document</em> الخاص بك بمثابة مستند نصي <em>text document</em>. وكما هو الحال في المستندات النصية، قد يحتوي على عناوين <em>headings</em> وصور <em>images</em> ونصوص غامقة <em>bold text</em> وتنسيقات أخرى <em>other formatting</em>.</p>
+		<p>يشير المعنى الدلالي <em>The semantic meaning</em> لعنصر ما إلى المعلومات الخاصة التي ينقلها هذا العنصر.</p>
+		<h4>المعنى الدلالي <em>The semantic meaning</em> لعنصر <code class="br">p</code>، على سبيل المثال، هو فقرة نصية:</h4>
+
+		<div class="code-block">
+			<pre><code>
+<span class="tag">&lt;p&gt;</span>
+
+.دعوني أخبركم عن عطلتي الرائعة في باريس
+!رأيتُ برج إيفل الرائع عن قرب
+
+<span class="tag">&lt;/p&gt;</span>
+			</code></pre>
+		</div>
+
+		<p>معظم العناصر لها معنى دلالي <em>semantic meaning</em>. عنصر <code class="br">div</code> من العناصر القليلة جدًا التي لا تحمل هذا المعنى. ولكن ما أهمية هذا؟</p>
+		<p>أولاً وقبل كل شيء، يضمن استخدام لغة "اتش.تي.إم.إل" الدلالية المناسبة <em>proper semantic HTML</em> أفضل تجربة للمستخدمين الذين يستخدمون تقنيات مساعدة مثل قارئات الشاشة <em>screen readers</em>. كما يمكن للغة "اتش.تي.إم.إل" الدلالية <em>semantic HTML</em> تحسين ترتيب موقعك في نتائج البحث <em>search rankings</em>، وهو ما يُعرف بتحسين محركات البحث <strong>SEO</strong>.</p>
+		<p>أخيرًا، يُمكن لاستخدام العناصر الدلالية الصحيحة <em>correct semantic elements</em> أن يُحسّن تجربة تطوير <em>improve your development experience</em> موقعك. فبدلًا من البحث بين العديد من عمليات التطوير للعثور على "شريط التنقل" <em>navigation bar</em>، يُمكنك تعديل عنصر <code class="br">nav</code> مباشرةً ومعرفة التغييرات التي تُجريها. ستتعلم في هذا القسم المزيد عن هذه المواضيع، وكيفية استخدام العناصر الدلالية <em>semantic elements</em>، وأهمية "اتش.تي.إم.إل" الدلالية <strong>Importance of Semantic HTML</strong>.</p>
+		
+	
+	<!-- Questions  أسئلة -->
+	<div class="questions">
+		<h4>أسئلة :</h4>
+		<h5>ما المقصود بالدلالة Semantic ؟</h5>
+		<p> ١. التدقيق في الكود <em>Nit picking the code</em>. ❌</p>
+		<p><mark> ٢. معنى وبنية الكلمات/العبارات <em>The meaning and structure of words/phrases</em> في لغة ما. ✅</mark></p>
+		<p> ٣. مصطلح نحوي <em>A grammar term</em> لا علاقة له بالبرمجة <em>programming</em>. ❌</p>
+		<p> ٤. تعريفات القاموس <em>Dictionary definitions</em>. ❌</p>
+
+		<br>
+		<h5>ما العنصر الذي لا يحمل معنى دلاليًا not have semantic meaning ؟</h5>
+		<p><mark>١. <code class="br">div</code> ✅</mark></p>
+		<p>٢. <code class="br">h1</code> ❌</p>
+		<p>٣. <code class="br">p</code> ❌</p>
+		<p>٤. <code class="br">img</code> ❌</p>
+
+		<br>
+		<h5>لماذا يجب أن تهتم بـ "اتش.تي.إم.إل" الدلالي Semantic HTML ؟</h5>
+		<p> ١. يُحسّن تحسين محركات البحث <em>Improves SEO</em>.</p>
+		<p>٢. يُحسّن إمكانية الوصول <em>Improves Accessibility</em>.</p>
+		<p>٣. يُحسّن تجربة المُطوّر <em>Improves Developer Experience</em>.</p>
+		<p><mark> ٤. جميع ما سبق. ✅</mark></p>
+	</div>
+
+
+
 	</section>
 
     <section id="2">
+		<h3>ب. لماذا من المهم وجود تسلسل هيكلي جيد Good Structural Hierarchy ؟</h3>
 	</section>
 
     <section id="3">
+		<h3>ج. ما الفرق بين اتش.تي.إم.إل العرضي Presentational HTML و اتش.تي.إم.إل الدلالي Semantic HTML ؟</h3>
 	</section>
-    <section id="4">
-	</section>
-
+   
 </div>
 
 <!-- Pages -->

semantic/semantic1.html

@@ -0,0 +1,16 @@
+{
+  "name": "HTMLverse",
+  "short_name": "HTMLverse",
+  "description": "A free and open-source Arabic learning platform for HTML.",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#0d6efd",
+  "icons": [
+    {
+      "src": "/assets/HTMLverse500.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

site.webmanifest

@@ -5,18 +5,18 @@
 >
   <url>
     <loc>https://arabiverse.github.io/HTMLverse/</loc>
-    <lastmod>2025-11-08</lastmod>
+    <lastmod>2025-11-26</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
 
   <!-- Example subpages (add your real ones) -->
-  <url>
+  <!-- <url>
     <loc>https://arabiverse.github.io/HTMLverse/</loc>
     <lastmod>2025-11-08</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
-  </url>
+  </url> -->
 
   <!-- <url>
     <loc>https://arabiverse.github.io/HTMLverse/about.html</loc>