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

هذا الدرس الرابع من دورة تعلم لغة الاتش تي ام ال أو HTML أو هتمل و في هذا الدرس سوف اقدم لكم عناصر لغة HTML اتش تي ام ال .

عادة ما يتكون عنصر الـ HTML من وسم البدء و وسم الانتهاء ، مع محتوى يتم إدراجه بينهم :

<tagname>Content goes here…</tagname>

عنصر HTML هو كل شيء من وسم البداية إلى وسم النهاية :

<p>My first paragraph.</p>

وسم البداية محتوي العنصر وسم النهاية
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>

بعض عناصر HTML الفارغة (لا يحتوي علي محتوى) و ليس لديه وسم نهاية، مثل عنصر <br> (الذي يشير إلى وجود فاصل أسطر) .

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

إن عناصر الـ HTML يمكن أن تتداخل (عناصر يمكن أن تحتوي على عناصر اخري) وتتكون كل مستندات HTML من عناصر HTML المتداخلة و هذا المثال يحتوي علي أربعة عناصر HTML :

[code]<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>[/code]

و تكون بهذا الشكل

تعلم html بالعربية

تعلم html بالعربية

و هذا مثال أوضح

يحدد عنصر <HTML> المستند بالكامل أنه يحتوي على وسم البداية <html> ثم وسم الإغلاق </HTML> . عنصر المحتوي هو عنصر HTML آخر (<body> عنصر) .

[code]<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>[/code]

و عنصر <body> يحدد جسم او نص المستند , أنه يحتوي على وسم البداية <body> و وسم الإغلاق </body> . و يحتوي العنصر علي اثنين من عناصر الاتش تي ام ال الأخري (<h1> و <p>) .

[code]<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>[/code]

عنصر <h1> يحدد العنوان , و يحتوي علي وسم البداية <h1> و وسم الإغلاق </h1> .

محتوي العنصر : My First Heading

[code]<h1>My First Heading</h1>[/code]

عنصر <p> يحدد الفقرة , و هو يحتوي علي وسم البداية <p> و وسم الاغلاف </p> .

محتوي العنصر : My first paragraph .

[code]<p>My first paragraph.</p>[/code]

لا تنسوا علامة النهاية

سيتم عرض بعض عناصر الـ HTML بشكل صحيح، حتى إذا قد نسيت علامة نهاية :

مثال

[code]<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>[/code]

سوف تظهر هكذا

YourColor.Net

المثال أعلاه يعمل في جميع المتصفحات، لأنه يعتبر علامة إغلاق اختياري . لا تعتمد على هذا. قد تعطي نتائج غير متوقعة أو أخطاء إذا كنت قد نسيت وسم النهاية .

عناصر HTML فارغة

العناصر التي ليس بها اي محتوي تُسمي بالعناصر الفارغة , إن عنصر <BR> فارغ بدون علامة إغلاق (علامة <br> لتحديد فاصل أسطر) .

العناصر الفارغة يمكن أن تكون “مغلقة” في العلامة فتح مثل هذا : < br/> .

HTML5 لا تتطلب عناصر فارغة لتكون مغلقة . ولكن إذا كنت تريد التحقق من صحة أكثر صرامة، أو إذا كنت بحاجة إلى جعل المستند قابل للقراءة من قبل موزعين XML، يجب إغلاق كافة عناصر HTML بشكل صحيح .

استخدام حرف صغيره للعلامات

إن وسوم HTML غير حساسه لحالة الأحرف : و هذا يعني <P> نفس <p> . لا يتطلب HTML5 القياسي علامات أحرف صغيرة، ولكن ورشة لونك توصي بأحرف صغيرة في HTML، و الحروف الصغيرة مطلوبة في أشد أنواع المستندات مثل XHTML .

ملاحظة : في ورشة لونك نحن دائما نستخدم الوسوم الصغيرة .

الدرس التالي : قريباً
الدرس السابق : أمثلة الأساسيات في HTML
باقي الدروس : دورة تعلم HTML اتش تي ام ال مجانا