الاثنين، 18 يونيو 2018

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

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

 عشاق  ومتابعي مدونة حوحو للمعلوميات، يقدم لكم حوحو بكل فخر وفرح وبكل الجهد الممكن دورة تعلم واحتراف لغة 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 (البنية التركيبية).


المصدر : http://www.igli5.com/2018/06/html-2.html


تعبيراتتعبيرات