عشاق ومتابعي مدونة حوحو للمعلوميات، كالعادة يقدم لكم حوحو بكل فخر وفرح وبكل الجهد الممكن دورة تعلم واحتراف لغة HTML ، وتأتيكم في سلسلة دروس مبسطة للجميع وخصوصا المبتدئين في مجال تعلم لغات تصميم صفحات الويب.
إذا فاتكم شرح الدرس الأول على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تبدأ معي هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 1
أما إذا فاتكم شرح الدرس الثاني على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 2
سوف تحتاجون إلى محرر النصوص الذي تكتب عليه الأكواد يمكنكم تحميله من هنا : Notepad++
الدرس 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>.
هكذا نكون وصلنا إلى نهاية درسنا والذي تناولنا فيها بالشرح والتحليل الدرس الثالث من سلسلة دروس دورة تعلم واحتراف لغة HTML على مدونة حوحو للمعلوميات
لاحقا الدرس الرابع : خصائص HTML
إذا فاتكم شرح الدرس الأول على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تبدأ معي هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 1
أما إذا فاتكم شرح الدرس الثاني على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 2
سوف تحتاجون إلى محرر النصوص الذي تكتب عليه الأكواد يمكنكم تحميله من هنا : Notepad++
سوف نشرح بإذن الله البنية التركيبية لعناصر 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> بالوسم المفتوح <body> وينتهي بالوسم المغلق
</ body > (انظر الصورة أدناه)
يبدأ عنصر <h1> بالوسم المفتوح <h1> وينتهي بالوسم المغلق </h1> (انظر الصورة أدناه)
يبدأ عنصر <p> بالوسم المفتوح <p> وينتهي بالوسم المغلق </p> (انظر الصورة أدناه)
ملاحظات:
لا تترك مساحات داخل عناصر HTML ف مثلا عنصر <p> ليس هو عنصر < p > .
تجنب كتابة عناصر HTML بأحرف كبيرة ف مثلا عنصر <p> ليس هو عنصر <P> .
الفرق بين الوسم والعنصر هو أن العنصر يمثل وسمين الأول مفتوح والآخر مغلق والوسم هو جزء من العنصر، فمثلا العنصر <p> لديه وسمين الأول مفتوح هو <p> والآخر مغلق هو </p>.
هكذا نكون وصلنا إلى نهاية درسنا والذي تناولنا فيها بالشرح والتحليل الدرس الثالث من سلسلة دروس دورة تعلم واحتراف لغة HTML على مدونة حوحو للمعلوميات
لاحقا الدرس الرابع : خصائص HTML
ليست هناك تعليقات:
إرسال تعليق