عشاق ومتابعي مدونة حوحو للمعلوميات، يقدم لكم حوحو بكل فخر وفرح وبكل الجهد الممكن دورة تعلم واحتراف لغة HTML ، وتأتيكم في سلسلة دروس مبسطة للجميع وخصوصا المبتدئين في مجال تعلم لغات تصميم صفحات الويب.
وإذا فاتكم شرح الدرس الأول على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تبدأ معي هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 1
سوف تحتاجون إلى محرر النصوص الذي تكتب عليه الأكواد يمكنكم تحميله من هنا : Notepad++
الدرس 2: عناصر HTML
سوف نشرح بإذن الله عناصر لغة HTML الأساسية التي تعتمد عليها في صياغة أكوادها وأتحدث هنا عن: الملف الرئيسي، الفقرات، العناوين، الروابط، والصور. نبدأ على بركة الله :
ملف HTML:
<! DOCTYPE html> - وهي الصيغة التعريفية لبداية نص HTML ولكنها ليست ضرورية فهي فقط للتأكد من أن الملف مرتبط بلغة HTML (انظر الصورة 1 أدناه)
-يبدأ ملف HTML بـما يطلق عليه وسم بداية ملف <html> وينتهي بـما يطلق عليه وسم نهاية ملف </ html> (انظر الصورة 1 أدناه)
-النتيجة النهائية التي تظهر على متصفحك هي الكود الموجود بين الوسم<body> و الوسم </ body> (انظر الصورة 1 أدناه)
عناوين HTML:
نمثل عناوين HTML بالأوسام التالية : <h1> <h6> <h5> <h4> <h3> <h2>
الوسم <h1> يمثل العنوان الأكثر أهمية
الوسم <h6> يمثل العنوان الأقل أهمية
مثال 1:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ) الصورة 2 أدناه ):
بعد ذلك ستجد في محرر النصوص Notepad++ قائمة اسمها RUN اضغط عليها ثم اضغط على Launch in Firefox وستظهر لك نتيجة الكود ( الصورة 3 أدناه):
فقرات HTML :
نمثل فقرات HTML بالوسم التالي : <p>
مثال 2:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ) الصورة 4 أدناه ):
بعد ذلك ستجد في محرر النصوص Notepad++ قائمة اسمها RUN اضغط عليها ثم اضغط على Launch in Firefox وستظهر لك نتيجة الكود ( الصورة 5 أدناه):
روابط HTML :
نمثل روابط HTML بالوسم التالي : <a>
مثال 3:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ) الصورة 6 أدناه ):
بعد ذلك ستجد في محرر النصوص Notepad++ قائمة اسمها RUN اضغط عليها ثم اضغط على Launch in Firefox وستظهر لك نتيجة الكود ( الصورة 7 أدناه):
صور HTML:
نمثل صور HTMLبالوسم <img>
مثال 4:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ) الصورة 8 أدناه ):
بعد ذلك ستجد في محرر النصوص Notepad++ قائمة اسمها RUN اضغط عليها ثم اضغط على Launch in Firefox وستظهر لك نتيجة الكود ( الصورة 9 أدناه):
هكذا نكون وصلنا إلى نهاية درسنا الثاني والذي تناولنا فيها بالشرح والتحليل الدرس الثاني من سلسلة دروس دورة تعلم واحتراف لغة HTML
لاحقا الدرس الثالث: عناصر HTML (البنية التركيبية).
وإذا فاتكم شرح الدرس الأول على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تبدأ معي هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 1
سوف تحتاجون إلى محرر النصوص الذي تكتب عليه الأكواد يمكنكم تحميله من هنا : Notepad++
سوف نشرح بإذن الله عناصر لغة HTML الأساسية التي تعتمد عليها في صياغة أكوادها وأتحدث هنا عن: الملف الرئيسي، الفقرات، العناوين، الروابط، والصور. نبدأ على بركة الله :
ملف HTML:
<! DOCTYPE html> - وهي الصيغة التعريفية لبداية نص HTML ولكنها ليست ضرورية فهي فقط للتأكد من أن الملف مرتبط بلغة HTML (انظر الصورة 1 أدناه)
-يبدأ ملف HTML بـما يطلق عليه وسم بداية ملف <html> وينتهي بـما يطلق عليه وسم نهاية ملف </ html> (انظر الصورة 1 أدناه)
-النتيجة النهائية التي تظهر على متصفحك هي الكود الموجود بين الوسم<body> و الوسم </ body> (انظر الصورة 1 أدناه)
نمثل عناوين HTML بالأوسام التالية : <h1> <h6> <h5> <h4> <h3> <h2>
الوسم <h1> يمثل العنوان الأكثر أهمية
الوسم <h6> يمثل العنوان الأقل أهمية
مثال 1:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ) الصورة 2 أدناه ):
نمثل فقرات HTML بالوسم التالي : <p>
مثال 2:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ) الصورة 4 أدناه ):
نمثل روابط HTML بالوسم التالي : <a>
مثال 3:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ) الصورة 6 أدناه ):
نمثل صور HTMLبالوسم <img>
مثال 4:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ) الصورة 8 أدناه ):
لاحقا الدرس الثالث: عناصر HTML (البنية التركيبية).
ليست هناك تعليقات:
إرسال تعليق