بالصور دورة تعلم واحتراف لغة HTML – الدرس 2 سوف تنال اعجابك
الدرس 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 (البنية التركيبية).
