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>CloseTag</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.
<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"، ويوجد بداخلها المحتوى الذي سيظهر على صفحة الويب، سواءٌ كان هذا المحتوى نصي أو عنصر داخلي.
مكونات العناصر المُتداخلة "nested elements":
تتكون العناصر المتداخلة من ثلاثة أجزاء، هي:
- 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>
معلومة هامة
معلومة هامة جدًا يجب عدم تجاهلها !!
_لا يوجد محتوى للعناصر الفارغة فلا يوجد بداخلها نص text، ولا عنصر جديد new element.
</>
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> و<body> و <p> سنتعرف عليها لاحقًا.
</>
Tag name in HTML elements
اسم العلامة في عناصر لغة HTML
tag name هو اسم العلامة والذي يقع بين العلامات في لغة HTML وهو جزء من العنصر المتداخل أو الفارغ "nested or empty element".
أين توجد هذه الأسماء "tag names" في العناصر المتداخلة "Nested Elements"؟
- open tag توجد في علامة البداية بين علامة الأصغر من [>] وعلامة الأكبر من [<].
- close tag توجد في علامة الإغلاق بين علامة الأصغر من [>] وعلامة الأكبر من [<].
أين توجد هذه الأسماء "tag names" في العناصر الفارغة "Empty Elements"؟
- open tag توجد في علامة البداية بين علامة الأصغر من [>] وعلامة الأكبر من [<].
كل علامة تخبر متصفحات الويب "browsers" بالقيام بعملية render لتقوم المتصفحات بتحويل النصوص إلى أشكال مرئية بناءً على اسم الـtag name.
إذا قمنا بكتابة الـtag name بحرف p بداخل عنصر، فمن المفترض أن يقوم المتصفح بإنشاء نص لك على المتصفح بشكل مبدئي، إلا إذا قمت لاحقًا بإعطاء المتصفح معلومات إضافية حول النص لكي يحدد لك حجمه ولونه.
Open Tag syntax in HTML
علامة أكبر من + علامة أصغر من وبينهما كلمة body يطلق عليها open tag.
<body>
Tag name syntax in HTML
كلمة body بدون علامة أكبر من + علامة أصغر من يطلق عليها tag name.
body
Close Tag syntax in HTML
علامة أكبر من + علامة أصغر من و backslash وبينهما كلمة 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 عناصر الوسائط المتعددة: مثل الصور "images"، والفيديوهات "videos"، والمقاطع الصوتية "audios"، والمؤثرات الحركية "animated effect" كملفات الفلاش، والصور المتحركة "animated images".
- data Elements عناصر بيانات: مثل الجداول "tables"، والقوائم المرقمة "order list"، وغير المرقمة "unordered list"، والقوائم الفرعية "sub list".
- navigation elements عناصر تنقُّل: مثل الروابط التي تربط بين صفحتي ويب وهي عبارة عن نص متصل برابط خارجي أو داخلي.
- hidden elements عناصر غير مرئية: وهي عناصر تضيف بعض المعلومات للمتصفحات ومحركات البحث، أو تضيف معلومات برمجية لا داعي لأن يراها الزائر أو المستخدم.
- forms elements عناصر النماذج: وهي العناصر التي يقوم المستخدم بإدخال البيانات فيها لكي يتم معالجتها على السيرفر، وتعطي نتائج فورية أو مقرونة بوقت.
ملاحظة
</>
Case insensitivity in HTML tags
العلامات في لغة 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 element in single line vs multi 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>
عناصر HTML
عناصر
متداخلة
عناصر متداخلة
عناصر فارغة
فارغ
علامة الإغلاق
علامة
علامة الفتح
محتوي
بنية العنصر المتداخلة
بنية أو هيكل
إسم العلامة
شرطة مائلة للخلف
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
