You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: semantic/semantic1.html
+142Lines changed: 142 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -198,6 +198,148 @@ <h5>كيف يمكنك إنشاء نص أكبر <em>larger text</em> على صف
198
198
199
199
<sectionid="3">
200
200
<h3>ج. ما الفرق بين اتش.تي.إم.إل العرضي Presentational HTML و اتش.تي.إم.إل الدلالي Semantic HTML ؟</h3>
201
+
<p>تُركز لغة "اتش.تي.إم.إل" التقديمية <strong>Presentational HTML</strong> على مظهر المحتوى وأسلوبه. في بداياتها، كان المطورون يستخدمون عناصر مثل المركز <codeclass="br">center</code> و الكبير <codeclass="br">big</code> و الخط <codeclass="br">font</code>. ولكن في تطوير الويب الحديث، لا ينبغي استخدام هذه الأنواع من العناصر، نظرًا لقيودها <em>limitations</em> وتأثيرها السلبي <em>negative impact</em> على إمكانية الوصول <em>accessibility</em> والصيانة <em>maintainability</em>.</p>
202
+
<p>العديد من عناصر "اتش.تي.إم.إل" التقديمية <em>Presentational HTML elements</em> أصبحت قديمة، أي أنها لم تعد مُوصى بها. هناك طرق أفضل للحصول على نفس النتائج. مع ذلك، من المفيد معرفة وجودها، لذا سنلقي نظرة على بعض الأمثلة.</p>
203
+
<p>عنصر <codeclass="br">font</code>، عنصر قديم يُستخدم لتحديد حجم ولون خط النص.</p>
204
+
<h4>فيما يلي مثال لعنصر <codeclass="br">font</code>:</h4>
205
+
206
+
<divclass="code-block">
207
+
<pre><code>
208
+
<spanclass="tag"><font</span><spanclass="attr">size=</span><spanclass="value">"5"</span><spanclass="attr">color=</span><spanclass="value">"blue"</span><spanclass="tag">></span>هذا النص باللون الأزرق وكبير.<spanclass="tag"></font></span>
209
+
</code></pre>
210
+
</div>
211
+
<divclass="preview" role="presentation">
212
+
<fontsize="5" color="blue">هذا النص باللون الأزرق وكبير.</font>
213
+
</div>
214
+
215
+
<p>يُعيّن هذا المثال لون <em>color</em> النص إلى <codeclass="br">blue</code> وحجمه <em>size</em> إلى القيمة <codeclass="br">5</code>. يتراوح نطاق سمة <codeclass="br">size</code> بين <codeclass="br">1</code> و <codeclass="br">7</code>، حيث <codeclass="br">1</code> هو الأصغر و<codeclass="br">7</code> هو الأكبر. القيمة الافتراضية <em>The default value</em> هي <codeclass="br">3</code>، إذا لم تُعيّن القيمة صراحةً.</p>
216
+
217
+
<p>على الرغم من أن هذا العنصر لا يزال يعمل، فلا يجب عليك استخدامه لأنه يجب دائمًا تعيين حجم الخط ولونه في <strong>CSS</strong>، وليس في "اتش.تي.إم.إل" <em>HTML</em>.</p>
218
+
219
+
<p>العنصر <codeclass="br">center</code> هو عنصر آخر تم إهماله ويستخدم لمركز المحتوى <em>to center the content</em> أفقيًا <em>horizontally</em> داخل الحاوية <em>container</em> الخاصة به.</p>
220
+
221
+
<h4>فيما يلي مثال لعنصر <codeclass="br">center</code> الذي يحتوي على نص <em>text</em> وعنصر فقرة <em>a paragraph element</em>:</h4>
<spanclass="tag"><p></span>.مثال نص آخر<spanclass="tag"></p></span>
231
+
</code></pre>
232
+
</div>
233
+
234
+
<divclass="preview" role="presentation">
235
+
<center>
236
+
هذا النص في المنتصف.
237
+
<p>اتش.تي.إم.إل رائع.</p>
238
+
</center>
239
+
240
+
<p>مثال نص آخر.</p>
241
+
</div>
242
+
<br>
243
+
<p>والآن، لدينا العنصر <strong>big</strong>. وهو عنصر "اتش.تي.إم.إل" عرضي قديم <em>deprecated presentational HTML</em> آخر، يجعل النص المُحاط <em>the enclosed text</em> أكبر بمقدار مستوى واحد <em>one level bigger</em> من النص المحيط به <em>its surrounding text</em> .</p>
244
+
245
+
<h4>لدينا هنا مثالاً يحدد فقرة مكونة من جزئين:</h4>
246
+
247
+
<divclass="code-block">
248
+
<pre><code>
249
+
<spanclass="tag"><p></span>
250
+
.حجم خط هذا النص عادي
251
+
<spanclass="tag"><big></span>.هذا النص أكبر<spanclass="tag"></big></span>
252
+
.نص آخر
253
+
<spanclass="tag"></p></span>
254
+
</code></pre>
255
+
</div>
256
+
257
+
<divclass="preview" role="presentation">
258
+
<p>
259
+
حجم خط هذا النص عادي.
260
+
<big>هذا النص أكبر.</big>
261
+
نص آخر.
262
+
</p>
263
+
264
+
</div>
265
+
266
+
<p>تذكر أن حجم الخط <em>font size</em> يجب أن يتم تعيينه دائمًا باستخدام <strong>CSS</strong>، لذلك لا يجب عليك استخدام هذا العنصر في "اتش.تي.إم.إل" الحديث <em>modern HTML</em>.</p>
267
+
268
+
<p>كانت هذه أمثلة لعناصر "اتش.تي.إم.إل" التقديمية <strong>Presentational HTML Elements</strong>. لكن جميعها أصبحت قديمة ولم تعد مُوصى بها. فماذا يُنصح باستخدامه بدلاً منها؟ لنرَ.</p>
269
+
270
+
<p>"اتش.تي.إم.إل" الدلالي <strong>Semantic HTML</strong> هو الآن الأسلوب المُوصى به. فهو يصف <em>describes</em> محتوى العناصر <em>content of the elements</em>، مما يُسهّل قراءتها وفهمها وصيانتها.</p>
271
+
272
+
<p>تستطيع محركات البحث <em>Search engines</em> فهم موقعك الإلكتروني بسهولة عند استخدام لغة "اتش.تي.إم.إل" الدلالية <strong>Semantic HTML</strong>. كما أنها مفيدة لتسهيل الوصول <em>Accessibility</em>، لأن قارئات الشاشة <em>screen readers</em> تحتاج إلى معلومات دلالية <em>Semantic information</em> لوصف <em>to describe</em> محتوى صفحة الويب.</p>
273
+
274
+
<h4>تتضمن أمثلة عناصر "اتش.تي.إم.إل" الدلالية <em>Semantic HTML Elements</em> ما يلي:</h4>
275
+
<ul>
276
+
<li>عنصر <codeclass="br">header</code> لتحديد رأس المستند <em>the header of the document</em> أو القسم <em>section</em>.</li>
277
+
<li>عنصر "قسم التنقل" <em>The navigation section element</em>، <codeclass="br">nav</code>، للأقسام التي تحتوي على "روابط تنقل" <em>navigation links</em>.</li>
278
+
<li>عنصر <codeclass="br">section</code> لتجميع <em>grouping</em> المعلومات ذات الصلة<em>related information</em>.</li>
<p>تُظهر العناصر الدلالية <strong>The Semantic Elements</strong> غرضها بوضوح ضمن بنية "اتش.تي.إم.إل" <em>The HTML Structure</em>. هناك العديد من عناصر "اتش.تي.إم.إل" الدلالية المختلفة. ستجد بالتأكيد العنصر الذي يناسب احتياجات مشروعك.</p>
309
+
310
+
311
+
<h5>عمل رائع. الآن تعرف الفرق بين "اتش.تي.إم.إل" العرضي Presentational والدلالي Semantic : "اتش.تي.إم.إل" الدلالي <em>Semantic HTML</em> يصف المحتوى، بينما "اتش.تي.إم.إل" العرضي <em>Presentational HTML </em> يركز على المظهر.</h5>
312
+
313
+
314
+
<!-- Questions أسئلة -->
315
+
<divclass="questions">
316
+
<h4>أسئلة :</h4>
317
+
318
+
<h5>أي مما يلي يصف بشكل أفضل الفرق بين "اتش.تي.إم.إل" العرضي Presentational HTML والدلالي Semantic HTML ؟</h5>
319
+
<p> ١. تُركز لغة "اتش.تي.إم.إل" التقديمية <em>Presentational HTML</em> على بنية المحتوى <em>content structure</em>، بينما تُركز لغة "اتش.تي.إم.إل" الدلالية <em>Semantic HTML</em> على المظهر <em>appearance</em>. ❌</p>
320
+
<p><mark> ٢. تُركز لغة "اتش.تي.إم.إل" الدلالية <em>Semantic HTML</em> على بنية المحتوى <em>content structure</em>، بينما تُركز لغة "اتش.تي.إم.إل" التقديمية <em>Presentational HTML</em> على المظهر <em>appearance</em>. ✅</mark></p>
321
+
<p> ٣. لا يوجد فرق بين لغة "اتش.تي.إم.إل" التقديمية <em>Presentational HTML</em> والدلالية <em>Semantic HTML</em>. ❌</p>
322
+
<p> ٤. كلاهما يُركز على الأسلوب، لكن لغة "اتش.تي.إم.إل" التقديمية <em>Presentational HTML</em> أكثر حداثة. ❌</p>
323
+
324
+
<br>
325
+
326
+
<h5>أي مما يلي مثال على "اتش.تي.إم.إل" العرضي Presentational HTML ؟</h5>
327
+
<p> ١. استخدام عنصر <codeclass="br">header</code> لتحديد رأس الصفحة. ❌</p>
328
+
<p> ٢. استخدام عنصر <codeclass="br">nav</code> لتحديد قسم التنقل. ❌</p>
329
+
<p> ٣. استخدام عنصر <codeclass="br">article</code> لتحديد محتوى مستقل. ❌</p>
330
+
<p><mark> ٤. استخدام عنصر <codeclass="br">center</code> لتوسيط المحتوى. ✅</mark></p>
331
+
<br>
332
+
333
+
<h5>أي مما يلي مثال على "اتش.تي.إم.إل" الدلالي Semantic HTML ؟</h5>
334
+
<p> ١. استخدام <codeclass="br"><"font color="red></code> لجعل النص أحمر. ❌</p>
335
+
<p> ٢. استخدام عنصر <codeclass="br">center</code> لتوسيط المحتوى. ❌</p>
336
+
<p><mark> ٣. استخدام عنصر <codeclass="br">nav</code> لتمثيل "قسم التنقل" <em>navigation section</em>. ✅</mark></p>
337
+
<p> ٤. استخدام عنصر <codeclass="br">big</code> لتكبير النص. ❌</p>
0 commit comments