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

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

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

ملاحظة  2:  تذكر دائما أن هناك اختلاف بين الوسم والعنصر على مستوى المضمون وليس على مستوى الشكل
مثال : نتحدث عن الوسم المفتوح <a> ومقابله الوسم المغلق </a>  وهذين الوسمين يجمعهما العنصر<a>  الذي يرمز للروابط في لغة  HTML  ويجمع الوسمين السابقين.
الدرس 5: خصائص HTML  الجزء الثاني
سنكتشف في هذا الدرس ثلاث خصائص : خاصية  style  -  خاصية lang   -  خاصية  title
1- خاصية style :
إذا أردت تلوين الفقرات والجمل والكلمات مثال : I am a paragraph
كما تلاحظون هذه الفقرة ملونة باللون الأحمر ولكي تظهر بهذا الشكل على صفحات الويب فإننا نستعمل خاصية style في لغة  HTML
نعرف قيمة لون الجمل والكلمات والفقرات في لغة HTML باستخدام خاصية style  المرافقة للعنصر المعرف للفقرات  <p>  والمرافقة للعنصر المعرف للعناوين <h1>
الصيغة العامة لخاصية style  المعرفة لقيمة اللون في لغة HTML هي :
<p style="color:red">I am a paragraph.</p>
تابع معي هذا المثال كي تفهم كيف تحصل على كلمة أو فقرة أو جملة ملونة على صفحة متصفحك انطلاقا من خاصية style :
مثال 1:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++  ( انظر الصورة أدناه ):

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

إذا أردت تكبير أو تقليص الفقرات والجمل والكلمات مثال:
I am a paragraph : هذه الفقرة صغيرة الحجم
I am a paragraph : هذه الفقرة كبيرة الحجم
كما تلاحظ فإن الفقرتان السابقتان مختلفتان من حيث الحجم ولكي تظهران بهذا الشكل على صفحات الويب فإننا نستعمل خاصية style في لغة  HTML
نعرف قيمة حجم الجمل والكلمات والفقرات في لغة HTML باستخدام خاصية style  المرافقة للعنصر المعرف للفقرات  <p>  والمرافقة للعنصر المعرف للعناوين <h1>
الصيغة العامة لخاصية style المعرفة لقيمة الحجم  في لغة HTML هي :
<p style="font-size:80px">I am a paragraph.</p>
  تابع معي هذا المثال كي تفهم كيف تحصل على كلمة أو فقرة أو جملة بحجم معين على صفحة متصفحك انطلاقا من خاصية  style :
مثال 2:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):

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

2- خاصية lang  :
نعرف لغة ملف HTML   باستخدام خاصية lang   وهذه الخاصية مرافقة لعنصر html الأساسي لبداية الملف ككل
الصيغة العامة لخاصية lang المعرفة للغة ملف HTML هي:
<"html lang="en-US>
مثال 3:
بالنسبة لخاصية lang فهي لا تنعكس كنتيجة على متصفحك بل هي فقط تعرف لغة الملف الداخلي ل HTML  (انظر الصورة  أدناه):

وعموما فهذه الخاصية ليست ضرورية يعني فقط لتسهيل عمل محركات البحث في بحثهم عن ملفات HTML
3- خاصية title  :
نعرف خاصية title  على أنها العنوان التوضيحي المفاجئ الذي يظهر فجأة عند وضع الفأرة على كلمة أو جملة ما أو فقرة ما :
الصيغة العامة لخاصية title  المعرفة للعنوان الظاهر فجأة فوق كلمة أو جملة أو فقرة في لغة HTML هي :
<h2 title="I'm here ">The title Attribute</h2>
مثال 4:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):

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

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