HTML Elements
عناصر لغة HTML
سنتعلم في هذا الدرس أنواع العناصر "Elements"، وطريقة كتابة كل نوع، والفرق بين هذه الأنواع، كل عنصر يعرض على المتصفح شكل معين، مثل: النصوص، وعناوين الصفحة الرئيسية، والفرعية، ومنها أيضا نصوص وصف الصفحة، أو وصف موضوع معين، ومنها المحتوى المرئي كالصور، والفيديوهات، والمحتوى الصوتي.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Elements
عناصر لغة HTML
</>
HTML elements
عناصر لغة HTML
العنصر في صفحة الويب هو جزء من الصفحة، حيث تتكون أي صفحة HTML من مجموعة عناصر. تتألف أي صفحة HTML من مجموعة عناصر، ولأي صفحة ويب عنوان رئيسي يُعتبر عنصرًا، كما أن لأي صفحة ويب وصف، وهذا الوصف يعتبر عنصرًا أيضًا. بالإضافة إلى ذلك، تحتوي أي صفحة ويب بداخلها على صور توضيحية عن الموضوع، وهذه الصور تُعتبر عناصر أيضًا.
عناصر HTML هي عبارة عن علامات أو رموز [tags] بينهما محتوى نصي، وتقوم المتصفحات بعملية تجسيد [Render] حيث تُزيل الرموز ليبقى المحتوى فقط ويظهر لزوار صفحات الويب إما على شكل نص أو شكل مرئي بناءً على نوعية العنصر. كل عنصر يحتوي على مجموعة بيانات [Data]، وهذه البيانات تُعرض على المتصفح بشكل مرسوم، مثل: الصور، والفيديوهات، والنصوص، والروابط.
</>
HTML elements types
أنواع العناصر في لغة HTML
تتكون عناصر لغة HTML من نوعين:
- النوع الأول: العناصر المتداخلة nested elements: وهي العناصر التي تحتوي بداخلها على عناصر داخلية أخرى أو نصوص، ولها علامة بداية [open tag] وعلامة إغلاق [close tag]، مثل: [<h1>Title</h1>].
- النوع الثاني: العناصر الفارغة empty elements: وهي العناصر التي لا تحتوي على عناصر بداخلها، ولها علامة بداية [open tag] فقط، وليس لها علامة إغلاق [close tag]، مثل: [<br>].
Nested element with text
العنصر الذي يوجد داخله نص يسمى عنصرًا متداخلًا في لغة HTML.
<h1>Welcome To CloseTag</h1>
Nested element into element
العنصر الذي يوجد داخله عنصر آخر يسمى عنصرًا متداخلًا في لغة HTML.
<body>
<h1> CloseTag HTML </h1>
</body>
Multi elements
مجموعة عناصر متداخلة توجد بداخل عنصر من النوع [Nested elements]:
<body>
<h1> CloseTag HTML </h1>
<p>Welcome To CloseTag</p>
</body>
Empty element
عنصر من النوع Empty لا يمكن أن يحتوي على عناصر بداخله، ويكتب على هيئة علامة بداية فقط [Open Tag].
<br>
</>
Nested elements in HTML
العناصر المتداخلة في لغة HTML
أغلب عناصر HTML هي من نوع العناصر المتداخلة nested elements، وهي العناصر التي يكون لها علامة بداية للعنصر [open tag]، وعلامة إغلاق [close tag]، ويوجد بداخلها المحتوى الذي سيظهر على صفحة الويب، سواء كان هذا المحتوى نصيًا أو عنصرًا داخليًا.
- open tag علامة البداية: تكون قبل بداية محتوى العنصر.
- close tag علامة النهاية: تكون بعد محتوى العنصر.
- content: محتوى العنصر والذي يكون إما نصًا أو عنصرًا آخر، ويكون بين علامة البداية وعلامة النهاية.
Nested element
العنصر المتداخل له علامة بداية open tag، وله علامة إغلاق close tag.
<h1>Welcome To CloseTag</h1>
معلومة هامة
المحتوى الذي يضاف إلى العناصر المتداخلة في لغة HTML يمكن أن يكون:
- text: نصوص أو فقرات نصية.
- new element: عنصر جديد سواء كان عنصرًا متداخلاً أو فارغًا.
</>
Nested element structure
هيكل العنصر المُتداخل في لغة HTML
مكونات علامة البداية open tag: تتكون علامة البداية [open tag] لأي عنصر مُتداخل في لغة HTML من ثلاثة أجزاء.
- الجزء الأول: يبدأ من اليسار وهو علامة أصغر من [<].
- الجزء الثاني: وهو الذي ينتهي به علامة البداية، وهي علامة أكبر من [>].
- الجزء الأوسط: هو اسم العنصر [tag name].
Open tag
علامة البداية
<h1>
مكونات علامة الإغلاق close tag: تتكون علامة الإغلاق [close tag] لأي عنصر مُتداخل في لغة HTML من أربعة أجزاء.
- الجزء الأول: يبدأ من اليسار وهو علامة أصغر من [<].
- الجزء الثاني: وهو الذي ينتهي به علامة الإغلاق، وهي علامة أكبر من [>].
- الجزء الأوسط: هو اسم العنصر [tag name].
- قبل الجزء الأوسط: علامة backslash [/] .
Close tag
علامة الإغلاق
</h1>
محتوى العنصر المُتداخل content: يتكون محتوى العنصر المتداخل في لغة HTML من جزئين.
- text: نصوص أو فقرات نصية.
- new element: عنصر جديد، سواء كان عنصرًا متداخلًا أو فارغًا.
Content
المحتوى
Welcome To Close Tag
Full nested element
عنصر متداخل كامل
<h1>Welcome To CloseTag</h1>
Nested element with nested element
مثال على عنصر متداخل كامل Full nested element بداخله عنصر متداخل آخر:
<body> <p>Welcome To CloseTag</p> </body>
ترتيب المحتوى
لماذا في الترتيب يكون المحتوى هو رقم 3 بعد علامة البداية وعلامة الإغلاق؟
لأن أغلب المبتدئين عند قيامهم بإنشاء عنصر متداخل nested element وبعد كتابة محتوى العنصر content لا يتذكرون وضع علامة الإغلاق [close tag]. لذلك يُنصح بكتابة المحتوى بعد الانتهاء من كتابة علامة البداية وعلامة الإغلاق لتجنب نسيان علامة الإغلاق، ويضمن ذلك عدم حدوث أخطاء في الكود وتجنب مشاكل في عرض الصفحة على المتصفح.
</>
HTML empty elements
العناصر الفارغة في لغة HTML
تكون بعض عناصر HTML من نوع العناصر الفارغة empty elements، وهي العناصر التي يكون لها علامة بداية فقط [open tag]، وليس لها علامة إغلاق [close tag]، ولا يكون بداخلها أي محتوى أو عناصر داخلية.
مكونات العناصر الفارغة empty elements: تتكون العناصر الفارغة في لغة HTML من جزء واحد فقط.
- open tag: علامة البداية.
Empty element
عنصر فارغ.
<br>
معلومة هامة
</>
HTML empty element structure
هيكل العنصر الفارغ في لغة HTML
مكونات علامة البداية open tag: تتكون علامة البداية "open tag" للعناصر الفارغة في لغة HTML من ثلاثة أجزاء.
- الجزء الأول: يبدأ من اليسار، وهي علامة أصغر من [<] .
- الجزء الثاني: وهو الجزء الذي تنتهي به العلامة، وهو علامة أكبر من [>] .
- الجزء الأوسط: هو اسم العنصر [tag name] .
Open tag
علامة البداية open tag للعناصر الفارغة empty element:
<br>
Full empty element
العنصر الذي لا يحتوي داخلَه نصوصٌ أو عناصر أخرى، يسمى عنصرًا فارغًا في لغة HTML.
<br>
ملاحظات هامة
- العناصر من نوع empty elements ليس لها محتوى داخلي، كما أنها تتكون من علامة بداية فقط "open tag".
- جميع العناصر المذكورة في الأمثلة أعلاه مثل [<br>]، و[<img>]، و[<input>] سنتعرف عليها في الدروس القادمة.
</>
Tag name in HTML elements
اسم العلامة في عناصر لغة HTML
اسم العلامة [tag name] هو النص الذي يظهر بين العلامتين < > في لغة HTML، وهو جزء من العنصر المتداخل أو الفارغ nested or empty element.
في العناصر المتداخلة Nested Elements، توجد أسماء العلامات tag names كما يلي:
- العلامة الافتتاحية [open tag] توجد بين علامة الأصغر من [<] وعلامة الأكبر من [>].
- العلامة الإغلاقية [close tag] توجد بين علامة الأصغر من [<] وعلامة الأكبر من [>] مع إضافة علامة المائل [/] بعد علامة الأصغر من [<].
أما في العناصر الفارغة [Empty Elements]، فتوجد أسماء العلامات [tag names] كما يلي:
- العلامة الافتتاحية [open tag] توجد بين علامة الأصغر من [<] وعلامة الأكبر من [>].
تخبر هذه العلامات متصفحات الويب browsers بالقيام بعملية تحويل النص إلى أشكال مرئية render بناءً على اسم العلامة. إذا قمنا بكتابة العلامة باسم p داخل عنصر، فمن المفترض أن يقوم المتصفح بعرض نص بشكل أولي، ما لم تتم إضافة معلومات إضافية لاحقًا لتحديد حجم النص أو لونه.
Open Tag syntax in HTML
علامة أكبر من [>] زائد علامة أصغر من [<] وبينهما كلمة body يُطلق عليها علامة افتتاحية [open tag].
<body>
Tag name syntax in HTML
كلمة body بدون علامة أكبر من أو علامة أصغر من، يُطلق عليها tag name.
body
Close Tag syntax in HTML
علامة أكبر من [>] زائد علامة أصغر من [<] وباك سلاش [/] وبينهما كلمة body يُطلق عليها علامة إغلاقية [close tag].
</body>
</>
HTML elements categories
فئات عناصر HTML
تنقسم عناصر HTML إلى:
- عناصر أساسية main elements: وهي العناصر التي تُكوِّن صفحة الويب أو مستند HTML.
- عناصر نصية text elements: وهي العناصر التي تبني العناوين heading، والفقرات النصية paragraph، والكلمات الدلالية tags.
- عناصر تنسيق formatting elements: وهي العناصر التي تضيف تنسيقًا إلى النصوص، مثل حجم النصوص font-size، والألوان colors، والخلفيات backgrounds، ودرجة ميل النص italic-text، وأهميته.
- عناصر الوسائط المتعددة multimedia elements: مثل الصور images، والفيديوهات videos، والمقاطع الصوتية audios، والمؤثرات الحركية animated effects كملفات الفلاش، والصور المتحركة animated images.
- عناصر بيانات data elements: مثل الجداول tables، والقوائم المرقمة ordered lists، وغير المرقمة unordered lists، والقوائم الفرعية sub lists.
- عناصر تنقُّل navigation elements: مثل الروابط التي تربط بين صفحات الويب والتي تكون عبارة عن نص متصل برابط خارجي أو داخلي.
- عناصر غير مرئية hidden elements: وهي العناصر التي تضيف بعض المعلومات للمتصفحات ومحركات البحث، أو تضيف معلومات برمجية لا يراها الزائر أو المستخدم.
- عناصر النماذج forms elements: وهي العناصر التي يقوم المستخدم بإدخال البيانات فيها لكي يتم معالجتها على السيرفر، وتعطي نتائج فورية أو مقترنة بوقت.
ملاحظة
</>
Tags in HTML are not case sensitive
العلامات في لغة HTML ليست حساسة لحالة الأحرف
- يمكننا استخدام العلامات بأحرف كبيرة أو أحرف صغيرة في لغة HTML، وذلك لأن العلامات ليست حساسة لحالة الأحرف.
- فمثلًا، إذا كان لدينا عنصر body، فيمكن كتابته BODY أو body دون حدوث أي مشكلة تقنية في كلا الكتابتين.
- ولكن يُفضّل استخدام العلامات tags بحروف صغيرة، لأن هذا الأمر يعد شائعًا في لغة HTML بين مطوري مواقع الويب، وهو الموصى به من جميع مطوري الويب.
Upper case
استخدام tag name بحروف كبيرة.
<BODY>
<P>Welcome To CloseTag</P>
</BODY>
Small case
استخدام tag name بحروف صغيرة.
<body>
<p>Welcome To CloseTag</p>
</body>
لا ننصح به
</>
HTML elements in one or more lines
عناصر HTML في سطر واحد أو عدة سطور
يمكن كتابة العنصر HTML element في سطر أو عدة سطور بناءً على المحتوى الداخلي؛ حيث إن هذه عملية تنظيمية فقط، ولا تحدث أي مشاكل عند كتابة العنصر في سطر واحد أو عدة أسطر.
تعليمات لكتابة العناصر في سطر أو عدة سطور:
- يُكتب عنصر HTML في سطر واحد إذا كان المحتوى نصيًا فقط، وإذا كان لا يزيد عن سطر واحد.
- يُكتب عنصر HTML في أكثر من سطر إذا كان المحتوى النصي يزيد عن سطر.
- يُكتب عنصر HTML في عدة سطور دائمًا إذا كان بداخله عناصر أخرى وليس نصوص فقط.
يجب وضع مسافات قبل أي عنصر داخلي في لغة HTML، لكي تكون العناصر الداخلية مقروءة، ونفصل بين العنصر الأب [parent] وبين العناصر الداخلية [children]. ويتم عمل هذه المسافات بواسطة زر [tab] وهو أعلى زر [shift] على يسار لوحة المفاتيح.
Nested element with text
عنصر بداخله نص يكتب في عدّة سطور، ولكن هذه الطريقة غير مفضلة على الرغم من كونها طريقة صحيحة.
<p> Welcome To CloseTag </p>
Nested element with text
عنصر بداخله نص يُكتب في سطر واحد إذا كان النص أقل من سطر، وهذه هي الطريقة المُفضلة.
<p>Welcome To CloseTag</p>
Nested element
عنصر بداخل عنصر، نضع قبل العنصر الداخلي مسافة، ونقوم بعمل المسافات بزر [tab] أعلى زر [shift] من يسار لوحة المفاتيح.
<body>
<p>Welcome To CloseTag</p>
</body>
Nested element with multiple texts
تُكتب علامة البداية على سطر منفصل، وعلامة النهاية على سطر منفصل، والمحتوى النصي بينهما؛ وذلك إذا زاد النص عن جملة أو سطر.
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
