دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 7

عشاق ومتابعي مدونة حوحو للمعلوميات، يقدم لكم حوحو بكل فخر وفرح وبكل الجهد الممكن دورة تعلم واحتراف لغة HTML  ، وتأتيكم في سلسلة دروس مبسطة للجميع وخصوصا المبتدئين في مجال تعلم لغات تصميم صفحات الويب.
إذا فاتكم شرح الدرس الأول على مدونة حوحو للمعلوميات اضغط  فقط على هذا الرابط لكي تبدأ معي هذه الدورة :  دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 1
إذا فاتكم شرح الدرس الثاني على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 2
إذا فاتكم شرح الدرس الثالث على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 3
إذا فاتكم شرح الدرس الرابع على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 4
إذا فاتكم شرح الدرس الرابع على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 5
أما إذا فاتكم شرح الدرس السادس على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 6
سوف تحتاجون إلى محرر النصوص الذي تكتب عليه الأكواد يمكنكم تحميله من هنا : Notepad++

قبل بداية الدرس أود أن أسترعي انتباهكم لملاحظتين:
ملاحظة  1:  سأذكرك أنه عندما تكتب أي مثال لأكواد HTML على محررNotepad++  يجب عليك حفظ هذا المثال أو الملف بصيغة HTML  ( انظر الصورة أدناه ):

ملاحظة 2 :  تذكر دائما أن هناك اختلاف بين الوسم والعنصر على مستوى المضمون وليس على مستوى الشكل
مثال : نتحدث عن الوسم المفتوح <a> ومقابله الوسم المغلق </a>  وهذين الوسمين يجمعهما العنصر<a>  الذي يرمز للروابط في لغة  HTML  ويجمع الوسمين السابقين.
الدرس 7: الفقرات في  HTML 
1- تعريف:
درسنا سابقا العناوين في HTML وعرفناها على أنها الكلمات ذات الأحجام المختلفة التي تظهر في صفحات الويب وفي هذا الدرس سوف نتطرق بإذن الله إلى الفقرات في HTML
نعرف الفقرات في HTML  على أنها الجمل العادية الكاملة المكونة لأي نص التي تظهر في صفحات الويب ( انظر الصورة أدناه ):

نعرف الفقرات في HTML باستعمال العنصر الآتي :   p
p : هذا العنصر يمثل الفقرة
الصيغة العامة للفقرات في لغة HTML هي :
<p>This is a paragraph.</p>
مثال 1:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++   ( انظر الصورة أدناه ):

بعد ذلك احفظ المثال باتباع الخطوات السابقة )عد إلى الملاحظة 1 أعلاه(  وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++   قائمة اسمها   RUN اضغط عليها ثم اضغط على
 Launch in Firefox  وستظهر لك نتيجة الكود (انظر الصورة  أدناه):

ملاحظة : عند ظهور نتائج فقرات HTML على متصفحك سوف تلاحظ أن متصفحك يترك بشكل تلقائي مساحات قبل وبعد كل فقرة (انظر الصورة  أدناه):

2- عرض الفقرات في HTML :
عند عرض صفحات HTML   قد تتغير طريقة العرض حسب أنماط الشاشات الصغيرة أو الكبيرة، مما قد يجعل المتصفح يحذف بعض المساحات الجانبية وربما قد يزاحم الكلمات بعضها ببعض. وقد تلاحظ أن عرض موقعك مثلا على هاتف عادي ليس هو نفس عرض موقعك على حاسوب لأن أحجام الفقرات تتقلص وأيضا المساحات
مثال 2:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++   (انظر الصورة أدناه ):

بعد ذلك احفظ المثال باتباع الخطوات السابقة (عد إلى الملاحظة 1 أعلاه)  وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++   قائمة اسمها   RUN اضغط عليها ثم اضغط على
 Launch in Firefox  وستظهر لك نتيجة الكود (انظر الصورة  أدناه):

مثال 3:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++   ( انظر الصورة أدناه ):

بعد ذلك احفظ المثال باتباع الخطوات السابقة (عد إلى الملاحظة 1 أعلاه)  وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++   قائمة اسمها   RUN اضغط عليها ثم اضغط على
 Launch in Firefox  وستظهر لك نتيجة الكود (انظر الصورة  أدناه):

كخلاصة للمثالين 2 و 3 فإن المتصفح يمسح أي أسطر إضافية أو مساحات موجودة في كود فقرات HTML عند ظهور نتيجة الكود على متصفحك
3- لا تنسى وسم النهاية:
ستعرض معظم المتصفحات نتائج أكواد HTML بالشكل الصحيح حتى لو نسيت وسم النهاية
مثال 4:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++   ( انظر الصورة أدناه ):

بعد ذلك احفظ المثال باتباع الخطوات السابقة (عد إلى الملاحظة 1 أعلاه)  وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++  قائمة اسمها  RUN اضغط عليها ثم اضغط على Launch in Firefox وستظهر لك نتيجة الكود (انظر الصورة  أدناه):

ملاحظة : من أجل تجنب مشاكل في نتائج أكواد HTML أنصحك بكتابة وسم البداية والنهاية مثلا : اكتب دائما وسم البداية  <p> و وسم النهاية   </p> 
4- الفاصل بين الأسطر:
نعرف الفاصل بين الأسطر بالعنصر  <br> وهو عبارة عن  فاصل بين سطر وآخر فيHTML  بمعنى إذا أردت الحصول على سطر جديد بدون بدء فقرة جديدة فاستخدم العنصر <br>  ولكي تفهم معي أكثر تابع معي هذا المثال:
مثال 5:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++   ( انظر الصورة أدناه ):

بعد ذلك احفظ المثال باتباع الخطوات السابقة (عد إلى الملاحظة 1 أعلاه)  وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++   قائمة اسمها   RUN اضغط عليها ثم اضغط على
 Launch in Firefox  وستظهر لك نتيجة الكود (انظر الصورة  أدناه):

ملاحظة : العنصر <br> لا يحتوي على وسم النهاية  فهو أحادي الوسم
5- مشكلة كتابة الشعر في أكواد HTML  :
وعلى هذا الصدد وبما أننا نتحدث عن الفقرات في درسنا هذا فقد يصادف أنك تود كتابة شعر في لغة HTML   ولكن المشكلة أن بيوت شعرك ستظهر في سطر واحد ولن تظهر في سطور مرتبة ومفترقة ولكي تفهم معي أكثر تابع معي هذا المثال:
مثال 6:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++   ( انظر الصورة أدناه ):

بعد ذلك احفظ المثال باتباع الخطوات السابقة (عد إلى الملاحظة 1 أعلاه)  وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++   قائمة اسمها   RUN اضغط عليها ثم اضغط على
 Launch in Firefox  وستظهر لك نتيجة الكود (انظر الصورة  أدناه):

6- عنصر <pre>  في لغة HTML  :
نعرف عنصر <pre> على أنه يحفظ فواصل الأسطر والمسافات والمساحات في الفقرات والنصوص والأشعار، ويرتبها بشكل منتظم ولكي تفهم معي أكثر تابع معي هذا المثال:
مثال 7:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++  (انظر الصورة أدناه ):

بعد ذلك احفظ المثال باتباع الخطوات السابقة (عد إلى الملاحظة 1 أعلاه)  وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++   قائمة اسمها   RUN اضغط عليها ثم اضغط على
 Launch in Firefox  وستظهر لك نتيجة الكود (انظر الصورة  أدناه):

إلى هنا نكون وصلنا إلى نهاية  درسنا والذي تناولنا فيها بالشرح والتحليل الدرس السابع من سلسلة دروس دورة تعلم واحتراف لغة HTML  على مدونة حوحو للمعلوميات .
لاحقا الدرس الثامن : الأنماط أو الستايلز في  HTML