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

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

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

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

- يمَكن لكل عنصر HTML أن يحتوي على مَا يسمَى بخاصية
- توفر الخاصية مَعلومَات إضافية حول العنصر
- تظهر الخاصية في بداية الوسمَ فقط
-تأتي الخاصية على شكل أزواج بالصيغة الآتية name="value"    يعني اسمَ = "قيمَة"
-اترك مَساحة بين العنصر والوسمَ مَثلا : نكتب الكود هكذا  <a  href> وليس هكذا  <ahref>
- سنكتشف في هذا الدرس أربع خصائص : خاصية  href  -  خاصية src   -  خاصية width and height   -  خاصية alt
1- خاصية href  :
إن الرابط أو اللينك الذي تشاهده على صفحات الويب وتضغط عليه فيقودك إلى صفحة أخرى كهذا الرابط مَثلا :  صفحة google  هو نتيجة لكود HTML وهذا الكود يعتمَد على العنصر<a>  والخاصية href لنتعرف عليهمَا :
نعرف روابط HTML باستخدامَ العنصر <a> ونستخدمَ خاصية href  المَرافقة للعنصر <a> لتعريف عنوان الرابط
الصيغة العامَة للروابط في لغة HTML هي :
<a href="https://www.example.com">This is a link</a>
مَثال 1:
الآن انقل الكود الظاهر على الصورة كمَا هو حرفيا واكتبه على مَحرر النصوص Notepad++   ( انظر الصورة أدناه ):

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

2- خاصية src  :
إن الصور التي تشاهدها على صفحات الويب بمَختلف أشكالها هي نتيجة لكود HTML وهذا الكود يعتمَد على العنصر< img >  والخاصية src  لنتعرف عليهمَا :
نعرف صور HTML باستخدامَ العنصر <img> ونستخدمَ خاصية src  المَرافقة للعنصر <img>  لتعريف مَصدر الصورة ويجب أن يكون اسمَ الصورة المَوجود في الكود هو نفسه اسمَ الصورة المَوجود في مَصدر حاسوبك
الصيغة العامَة للصور في لغة HTML هي :
<img src="example.jpg">
مَثال 2:
انقل الكود الظاهر على الصورة كمَا هو حرفيا واكتبه على مَحرر النصوص Notepad++   ( انظر الصورة أدناه ):

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

3- خاصية width and height :
إذا أردت تغيير حجمَ الصورة في لغة  HTML  فهذا الأمَر يعتمَد على خاصية الطول height  وخاصية العرض width
نعرف طول و عرض صور HTML باستخدامَ العنصر <img> ونستخدمَ خاصية height  المَرافقة للعنصر <img> لتعريف طول الصورة ونستخدمَ خاصية width  المَرافقة للعنصر <img> لتعريف عرض الصورة
الصيغة العامَة لخاصيتي الطول والعرض في الصور في لغة HTML هي :
<img src="example.jpg" width="500" height="600">
مَثال 3:
انقل الكود الظاهر على الصورة كمَا هو حرفيا واكتبه على مَحرر النصوص Notepad++ ( انظر الصورة أدناه ):

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

كمَا تلاحظ لقد تغير حجمَ الصورة كليا عن سابقتها لأننا أضفنا خاصيتي  width  و  height  في كود HTML
4- خاصية alt  :
عندمَا لا تظهر صورتك في مَتصفح الويب تلاحظ أن مَكانها فارغ ولكن يوجد نص في هذا المَكان يعبر عن وصف للصورة في ظل غيابها
نعبر عن عدمَ ظهور الصورة  في HTML باستخدامَ العنصر <img> ونستخدمَ خاصية alt  المَرافقة للعنصر <img> لوصف الصورة الغائبة في مَتصفح الويب
الصيغة العامَة لخاصية alt   في الصور في لغة HTML هي :
<img src="example.jpg" alt="Girl with a jacket">
مَثال 4:
انقل الكود الظاهر على الصورة كمَا هو حرفيا واكتبه على مَحرر النصوص Notepad++   ( انظر الصورة أدناه ):

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

هكذا نكون وصلنا إلى نهاية  درسنا والذي تناولنا فيها بالشرح والتحليل الدرس الرابع مَن سلسلة دروس دورة تعلمَ واحتراف لغة HTML  على مَدونة حوحو للمَعلومَيات
لاحقا الدرس الخامَس : خصائص HTML الجزء الثاني