HTML

HTML Elements
عناصر لغة HTML

سنتعلم في هذا الدرس أنواع العناصر "Elements"، وطريقة كتابة كل نوع، والفرق بين هذه الأنواع، كل عنصر يعرض على المتصفح شكل معين، مثل: النصوص، وعناوين الصفحة الرئيسية، والفرعية، ومنها أيضا نصوص وصف الصفحة، أو وصف موضوع معين، ومنها المحتوى المرئي كالصور، والفيديوهات، والمحتوى الصوتي.

التاريخ

03 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

11888

المواضيع

12
الشروحات chevron_left HTML Elements chevron_left HTML

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 عناصر النماذج: وهي العناصر التي يقوم المستخدم بإدخال البيانات فيها لكي يتم معالجتها على السيرفر، وتعطي نتائج فورية أو مقرونة بوقت.
ملاحظة
يساعدك تصنيف عناصر HTML في فهم العناصر وأنواعها وآلية عملها.

</> 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 "الـ tags"، وذلك لأن الحروف الصغيرة تُعد صيغة موحّدة لدى مطوري مواقع الويب.

</> 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 Elements
HTML Elements

عناصر HTML

Elements
Elements

عناصر

Nested
Nested

متداخلة

Nested Element
Nested Element

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

Empty Elements
Empty Elements

عناصر فارغة

Empty
Empty

فارغ

Close Tag
Close Tag

علامة الإغلاق

Tag
Tag

علامة

Open Tag
Open Tag

علامة الفتح

Content
Content

محتوي

Nested Element Structure
Nested Element Structure

بنية العنصر المتداخلة

Structure
Structure

بنية أو هيكل

Tag Name
Tag Name

إسم العلامة

Backslash
Backslash

شرطة مائلة للخلف

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.