عشاق ومتابعي مدونة حوحو للمعلوميات، يقدم لكم حوحو بكل فخر وفرح وبكل الجهد الممكن دورة تعلم واحتراف لغة 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 الجزء الثاني
إذا فاتكم شرح الدرس الأول على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تبدأ معي هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 1
أما إذا فاتكم شرح الدرس الثاني على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 2
أما إذا فاتكم شرح الدرس الثالث على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 3
سوف تحتاجون إلى محرر النصوص الذي تكتب عليه الأكواد يمكنكم تحميله من هنا : Notepad++
ملاحظة 1 : سأذكرك أنه عندما تكتب أي مثال لأكواد HTML على محررNotepad++ يجب عليك حفظ هذا المثال أو الملف بصيغة HTML ( انظر الصورة أدناه ):
مثال : نتحدث عن الوسم المفتوح <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++ ( انظر الصورة أدناه ):
Launch in Firefox وستظهر لك نتيجة الكود (انظر الصورة أدناه):
إن الصور التي تشاهدها على صفحات الويب بمختلف أشكالها هي نتيجة لكود HTML وهذا الكود يعتمد على العنصر< img > والخاصية src لنتعرف عليهما :
نعرف صور HTML باستخدام العنصر <img> ونستخدم خاصية src المرافقة للعنصر <img> لتعريف مصدر الصورة ويجب أن يكون اسم الصورة الموجود في الكود هو نفسه اسم الصورة الموجود في مصدر حاسوبك
الصيغة العامة للصور في لغة HTML هي :
<img src="example.jpg">
مثال 2:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):
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++ ( انظر الصورة أدناه ):
Launch in Firefox وستظهر لك نتيجة الكود (انظر الصورة أدناه):
4- خاصية alt :
عندما لا تظهر صورتك في متصفح الويب تلاحظ أن مكانها فارغ ولكن يوجد نص في هذا المكان يعبر عن وصف للصورة في ظل غيابها
نعبر عن عدم ظهور الصورة في HTML باستخدام العنصر <img> ونستخدم خاصية alt المرافقة للعنصر <img> لوصف الصورة الغائبة في متصفح الويب
الصيغة العامة لخاصية alt في الصور في لغة HTML هي :
<img src="example.jpg" alt="Girl with a jacket">
مثال 4:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):
لاحقا الدرس الخامس : خصائص HTML الجزء الثاني
from حوحو للمعلوميات https://ift.tt/2I8Lb8s
via IFTTT
0 التعليقات:
إرسال تعليق