دورة مهمة لتعلم واحتراف لغة HTML الدرس رقم 3
الدرس 3: عناصر HTML (البنية التركيبية)
سوف نشرح بإذن الله البنية التركيبية لعناصر HTML يعني كل ما يجب أن تعرفه عن محتوى اللغة بصفة عامة.
1- البنية التركيبية: عنصر + وسم
عنصر HTML هو الجزء الموجود بين الوسم المفتوح والوسم المغلق
كل عنصر HTML يبدأ بما يسمى وسم مفتوح وينتهي بما يسمى وسم مغلق وبين الوسمين المفتوح والمغلق يوجد المحتوى :
مثال 1:
<p>My first paragraph.</p>
<p>: وسم مفتوح أو وسم البداية
</p> : وسم مغلق أو وسم النهاية
.My first paragraph : المحتوى أو عنصر html
عنصر HTML ليس فقط الجزء الموجود بين الوسم المفتوح والوسم المغلق بل نعرفه بصفة عامة على أنه كل شيء من بداية الوسم المفتوح إلى نهاية الوسم المغلق :
مثال 2:
<p>My first paragraph.</p>
كل شيء من بداية الوسم المفتوح <p> مرورا بالمحتوى وصولا إلى نهاية الوسم المغلق </p> يسمى عنصر HTML
ملاحظة : تسمى عناصر HTML بدون أي محتوى بالعناصر الفارغة، لا تحتوي العناصر الفارغة على علامة النهاية الخاصة بالوسم المغلق أقصد هذه العلامة / وكمثال :
مثال 3:
الوسم المفتوح <p> وسم الفقرات paragraphs لديه وسم مغلق هو </p>
الوسم المفتوح <h1> وسم العناوين headings لديه وسم مغلق هو </h1>
الوسم المفتوح <br> ليس لديه وسم مغلق فهو حالة خاصة في لغة HTML و يشير إلى فاصل بعد كل سطر أو break لذلك سمي <br>
2 – أهم عناصر HTML :
إن عنصر <html> هو أساس الملف بأكمله وبدونه لا يمكن تعريف الملف على أنه مكتوب بلغة HTML
يبدأ عنصر <html> بالوسم المفتوح <html> وينتهي بالوسم المغلق </html> (انظر الصورة أدناه)
إن عنصر <body> يمثل صدر الملف أو جامع محتواه يعني كل أكواد لغة HTML توجد داخل عنصر <body>
يبدأ عنصر <body> بالوسم المفتوح <body> وينتهي بالوسم المغلق
</ body > (انظر الصورة أدناه)
إن عنصر <h1> يمثل العنوان
يبدأ عنصر <h1> بالوسم المفتوح <h1> وينتهي بالوسم المغلق </h1> (انظر الصورة أدناه)
إن عنصر <p> يمثل الفقرة
يبدأ عنصر <p> بالوسم المفتوح <p> وينتهي بالوسم المغلق </p> (انظر الصورة أدناه)
ملاحظات:
لا تترك مساحات داخل عناصر HTML ف مثلا عنصر <p> ليس هو عنصر < p > .
تجنب كتابة عناصر HTML بأحرف كبيرة ف مثلا عنصر <p> ليس هو عنصر <P> .
الفرق بين الوسم والعنصر هو أن العنصر يمثل وسمين الأول مفتوح والآخر مغلق والوسم هو جزء من العنصر، فمثلا العنصر <p> لديه وسمين الأول مفتوح هو <p> والآخر مغلق هو </p>.
