112 lines
5.1 KiB
Markdown
112 lines
5.1 KiB
Markdown
|
---
|
||
|
title: Elements
|
||
|
localeTitle: عناصر
|
||
|
---
|
||
|
# عناصر HTML
|
||
|
|
||
|
العناصر هي وحدات بناء HTML التي تصف بنية ومحتوى صفحة الويب. وهي جزء "Markup" من لغة توصيف النص التشعبي (HTML).
|
||
|
|
||
|
يستخدم بناء جملة HTML أقواس الزاوية ("<" و ">") للاحتفاظ باسم عنصر HTML. تحتوي العناصر عادةً على علامة افتتاحية وعلامة إغلاق ، وتقدم معلومات حول المحتوى الذي تحتوي عليه. الفرق بين الاثنين هو أن علامة الإغلاق تحتوي على شرطة مائلة للأمام.
|
||
|
|
||
|
في ما يلي مثال على استخدام [عنصر p](#) ( `<p>` ) لإخبار المتصفح بأن مجموعة من النصوص هي فقرة:
|
||
|
|
||
|
`
|
||
|
<p>This is a paragraph.</p>
|
||
|
`
|
||
|
|
||
|
يجب أن تتطابق علامات فتح وإغلاق ، وإلا فقد يعرض المتصفح المحتوى بطريقة غير متوقعة.
|
||
|
|
||
|
![XKCD comic الذي يعرض النص "س: كيف تزعج المطور؟" محاطًا بعلامة div الافتتاحية وعلامة span span](http://imgs.xkcd.com/comics/tags.png)
|
||
|
|
||
|
## عناصر الإغلاق الذاتي
|
||
|
|
||
|
تكون بعض عناصر HTML ذاتية الإغلاق ، بمعنى أنها لا تحتوي على علامة إغلاق منفصلة. عادةً ما تقوم عناصر الإغلاق الذاتي بإدراج شيء ما في المستند الخاص بك.
|
||
|
|
||
|
مثال على [عنصر br](#) ( `<br>` ) ، الذي يدرج فاصلا في النص. في السابق ، كانت علامات الإغلاق الذاتي مائلة إلى الأمام داخلها ( `<br />` ) ، ومع ذلك ، لم تعد مواصفات HTML5 تتطلب ذلك.
|
||
|
|
||
|
## وظيفة عنصر HTML
|
||
|
|
||
|
هناك العديد من عناصر HTML المتاحة. فيما يلي قائمة ببعض الوظائف التي تؤديها:
|
||
|
|
||
|
* تقديم معلومات حول صفحة الويب نفسها (البيانات الوصفية)
|
||
|
* هيكل محتوى الصفحة إلى أقسام
|
||
|
* تضمين صور أو مقاطع فيديو أو مقاطع صوتية أو وسائط متعددة أخرى
|
||
|
* إنشاء القوائم والجداول والنماذج
|
||
|
* تقديم المزيد من المعلومات حول محتوى نصي معين
|
||
|
* الارتباط إلى صفحات الأنماط التي تحتوي على قواعد حول كيفية عرض المتصفح للصفحة
|
||
|
* إضافة برامج نصية لجعل الصفحة أكثر تفاعلية وديناميكية
|
||
|
|
||
|
## تداخل عناصر HTML
|
||
|
|
||
|
يمكنك تداخل عناصر ضمن عناصر أخرى في مستند HTML. هذا يساعد على تحديد بنية الصفحة. فقط تأكد من إغلاق العلامات من داخل معظم العناصر أولاً.
|
||
|
|
||
|
صيح: `<p>This is a paragraph that contains a <span>span element.</span></p>`
|
||
|
|
||
|
غير صحيح: `<p>This is a paragraph that contains a <span>span element.</p></span>`
|
||
|
|
||
|
## كتلة المستوى وعناصر مضمن
|
||
|
|
||
|
تأتي العناصر في فئتين عامتين ، والمعروفة باسم مستوى الحظر والمضمنة. تبدأ عناصر مستوى الكتلة تلقائيًا في سطر جديد بينما تجلس العناصر المضمنة داخل المحتوى المحيط.
|
||
|
|
||
|
وعادةً ما تكون العناصر التي تساعد في تنظيم الصفحة إلى أقسام ، مثل شريط التنقل والعناوين والفقرات ، عناصر مستوى الكتلة. تكون العناصر التي تدرج أو تقدم المزيد من المعلومات حول المحتوى مضمنة بشكل عام ، مثل [الروابط](#) أو [الصور](#) .
|
||
|
|
||
|
## عنصر HTML
|
||
|
|
||
|
يوجد عنصر `<html>` يستخدم في احتواء الترميز الآخر لمستند HTML. يُعرف أيضًا باسم عنصر "الجذر" نظرًا لأنه العنصر الرئيسي لعناصر HTML الأخرى ومحتوى الصفحة.
|
||
|
|
||
|
في ما يلي مثال لصفحة بها [عنصر رئيسي](#the-head-element) ، [وعنصر أساسي](#the-body-element) ، [وفقرة](#the-p-element) واحدة:
|
||
|
|
||
|
`
|
||
|
<!DOCTYPE html>
|
||
|
<html>
|
||
|
<head>
|
||
|
</head>
|
||
|
<body>
|
||
|
<p>I'm a paragraph</p>
|
||
|
</body>
|
||
|
</html>
|
||
|
`
|
||
|
|
||
|
## عنصر الرأس
|
||
|
|
||
|
هذه هي الحاوية لمعالجة المعلومات والبيانات الوصفية لمستند HTML.
|
||
|
|
||
|
`
|
||
|
<head>
|
||
|
<meta charset="utf-8">
|
||
|
</head>
|
||
|
`
|
||
|
|
||
|
## عنصر BODY
|
||
|
|
||
|
هذه حاوية للمحتوى القابل للعرض لمستند HTML.
|
||
|
|
||
|
`
|
||
|
<body>...</body>
|
||
|
`
|
||
|
|
||
|
## ف عنصر
|
||
|
|
||
|
ينشئ فقرة ، ربما عنصر مستوى الكتلة الأكثر شيوعًا.
|
||
|
|
||
|
`
|
||
|
<p>...</p>
|
||
|
`
|
||
|
|
||
|
## عنصر A (Link)
|
||
|
|
||
|
ينشئ ارتباطًا تشعبيًا لتوجيه الزائرين إلى صفحة أو مورد آخر.
|
||
|
|
||
|
`
|
||
|
<a href="#">...</a>
|
||
|
`
|
||
|
|
||
|
## موارد آخرى
|
||
|
|
||
|
* [HTML الفقرات](#)
|
||
|
* [HTML br](#)
|
||
|
* [روابط HTML](#)
|
||
|
* [صور HTML](#)
|
||
|
* [رئيس HTML](#)
|
||
|
* [هيئة HTML](#)
|
||
|
* [HTML DOCTYPE](#)
|