الكورس

Advertisements

HTML Elements | In Arabic


HTML Elements – كل شئ فى لغة HTML عبارة عن عنصر element، حيث يتكون عنصر HTML غالبًا من 3 أجزاء:

  1. وسم البدء (Start tag)
  2. وضع المحتوى (سواء كان نص/رابط/صورة/ …إلخ).
  3. وسم النهاية (End tag).

 

شاهد الرسمة التوضيحية التالية:


 

العناصر – HTML Elements

 

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

 

مثال للتوضيح (بعض عناصر لغة HTML):
<h1>My main Heading</h1>
<p>This is Paragraph.</p>
<span>This is Span.</span>

My main Heading

This is Paragraph.

This is Span.

 

العناصر الفارغة – Empty Elements

 

لا تتطلب كل العناصر وجود وسم النهاية/محتوى ، حيث لا تحتوي بعض عناصر HTML على [محتوى و وسم النهاية]، مثل عنصر <hr> (يٌستخدم لإدراك خط أفقى).

تسمى هذه العناصر بالعناصر الفارغة (أى ليس لها وسم نهاية)، ولا يمكن أن تحتوي على أي محتوى أو عناصر أخرى. 

 

مثال للتوضيح (إدراك خط أفقى بين العنوان <h1> والفقرة <p>):
<h1>My main Heading</h1>
<hr>
<p>This is Paragraph.</p>

My main Heading


This is Paragraph.


 

العناصر الفارغة

 

العنصر الوصف
<br>يحدد فاصل أسطر.
<hr>يحدد خط أفقى لفصل أقسام محتوى في صفحة HTML.

يمكن أن تكون العناصر الفارغة “مغلقة” في علامة الفتح (</ hr>).


Advertisements

 

العناصر المتداخلة – Nested HTML Elements

 

عناصر HTML المتداخلة (وضع عنصر داخل عنصر آخر)؛ يمكن أن تحتوي معظم عناصر HTML على أي عدد من العناصر داخل بعض (باستثناء العناصر الفارغة). تتكون جميع ملفات HTML من عناصر متداخلة.

يمكن أن يكون العنصر المتداخل (أو العنصر الفرعي)، عنصرًا أصليًا أيضًا إذا تم تضمين عناصر أخرى فيه.

 

مثال للتوضيح (بعض العناصر المتداخلة):
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML Elements</title>
  </head>
  <body>

    <h1>HTML</h1>
    <p>We Use <b>HTML</b> Language For Built Websites.</p>

  </body>
</html>

HTML

We Use HTML Language For Built Websites.

شرح المثال السابق:

  1. يحدد إعلان <DOCTYPE!> معلومات عن نوع مستند HTML.
  2. العنصر <html> يحدد الملف بالكامل (هو حاوية لجميع عناصر HTML ولكل ما يظهر في مستند HTML، باستثناء إعلان الـ <DOCTYPE!>).
  3. كما يوجد داخل العنصر <html> عنصرين هم: <head> و <body>.
  4. يحدد العنصر <head> رأس المستند (هو حاوية للبيانات الوصفية ويتم وضعه بعد فتحة وسم الـ <html> وقبل فتحة وسم الـ <body>).
  5. داخل عنصر <head> عنصرين آخرين هم: <title>(يحدد عنوان المستند الذى يظهر فى علامة التبويب و <meta> (يحدد البيانات الوصفية لمستند HTML).
  6. يحدد العنصر <body> جسم أو المحتوى الرئيسي لمستند HTML.
  7. ستجد داخل عنصر الـ <body> عنصرين آخرين هم: <h1> (يحدد عنوان رئيسي) و <p> (يحدد فقرة).

 

لا تنسى إغلاق الوسم (End Tag): إذا نسيت قفلة الوسم الخاص بالعنصر الكود هيشتغل عادى، لكن هيدرك مشاكل فيما بعد، فكُن حَزر ولا تنسي إغلاق الوسم.

وسوم لغة HTML ليست حساسة لحالة الأحرف Case Sensitive (أى الوسم <H1> == <h1> ). لكن منظمة الـ W3C توصى بالأحرف الصغيرة.


 

تطبيق بسيط

 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Elements” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.






الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements