HTML Elements | In Arabic
HTML Elements – كل شئ فى لغة HTML عبارة عن عنصر element، حيث يتكون عنصر HTML غالبًا من 3 أجزاء:
- وسم البدء (Start tag)
- وضع المحتوى (سواء كان نص/رابط/صورة/ …إلخ).
- وسم النهاية (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.
العناصر الفارغة
يمكن أن تكون العناصر الفارغة “مغلقة” في علامة الفتح (</ hr>).
العناصر المتداخلة – 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.
شرح المثال السابق:
- يحدد إعلان <DOCTYPE!> معلومات عن نوع مستند HTML.
- العنصر <html> يحدد الملف بالكامل (هو حاوية لجميع عناصر HTML ولكل ما يظهر في مستند HTML، باستثناء إعلان الـ <DOCTYPE!>).
- كما يوجد داخل العنصر <html> عنصرين هم: <head> و <body>.
- يحدد العنصر <head> رأس المستند (هو حاوية للبيانات الوصفية ويتم وضعه بعد فتحة وسم الـ <html> وقبل فتحة وسم الـ <body>).
- داخل عنصر <head> عنصرين آخرين هم: <title>(يحدد عنوان المستند الذى يظهر فى علامة التبويب)، و <meta> (يحدد البيانات الوصفية لمستند HTML).
- يحدد العنصر <body> جسم أو المحتوى الرئيسي لمستند HTML.
- ستجد داخل عنصر الـ <body> عنصرين آخرين هم: <h1> (يحدد عنوان رئيسي) و <p> (يحدد فقرة).
لا تنسى إغلاق الوسم (End Tag): إذا نسيت قفلة الوسم الخاص بالعنصر الكود هيشتغل عادى، لكن هيدرك مشاكل فيما بعد، فكُن حَزر ولا تنسي إغلاق الوسم.
وسوم لغة HTML ليست حساسة لحالة الأحرف Case Sensitive (أى الوسم <H1> == <h1> ). لكن منظمة الـ W3C توصى بالأحرف الصغيرة.
تطبيق بسيط
قَيم نفسك – Mini quiz
قُم بإجراء هذا الإختبار القصير على درس “HTML Elements” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!