عشاق ومتابعي مدونة حوحو للمعلوميات، يقدم لكم حوحو بكل فخر وفرح وبكل الجهد الممكن دورة تعلم واحتراف لغة HTML ، وتأتيكم في سلسلة دروس مبسطة للجميع وخصوصا المبتدئين في مجال تعلم لغات تصميم صفحات الويب.
إذا فاتكم شرح الدرس الأول على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تبدأ معي هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 1
إذا فاتكم شرح الدرس الثاني على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 2
إذا فاتكم شرح الدرس الثالث على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 3
إذا فاتكم شرح الدرس الرابع على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 4
أما إذا فاتكم شرح الدرس الرابع على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 5
سوف تحتاجون إلى محرر النصوص الذي تكتب عليه الأكواد يمكنكم تحميله من هنا : Notepad++
قبل بداية الدرس أود أن أسترعي انتباهكم لملاحظتين:
ملاحظة 1 : سأذكرك أنه عندما تكتب أي مثال لأكواد HTML على محررNotepad++ يجب عليك حفظ هذا المثال أو الملف بصيغة HTML ) انظر الصورة أدناه ):
ملاحظة 2 : تذكر دائما أن هناك اختلاف بين الوسم والعنصر على مستوى المضمون وليس على مستوى الشكل
مثال : نتحدث عن الوسم المفتوح <a> ومقابله الوسم المغلق </a> وهذين الوسمين يجمعهما العنصر<a> الذي يرمز للروابط في لغة HTML ويجمع الوسمين السابقين.
الدرس 6: العناوين في HTML
1- تعريف:
إذا لاحظت في الجرائد والمجلات وصفحات الويب بعض العناوين البارزة وتجد العنوان الرئيسي هو الأكثر وضوحا والأكبر حجما كي يجذب القارئ وهنا تتساءل كيف يمكنني الحصول على هذه العناوين أو كتابتها على شكل كود HTML
نعرف العناوين في HTML على أنها الكلمات ذات الأحجام المختلفة التي تظهر في صفحات الويب ( انظر الصورة أدناه ):
نعرف العناوين في HTML باستعمال العناصر الآتية :
h1, h2, h3, h4, h5, h6
h1 : هذا العنصر يمثل العنوان الأكثر أهمية
h2, h3, h4, h5 : هاته العناصر تمثل بالتدرج العناوين من الأكثر أهمية إلى الأقل أهمية
h6 : هذا العنصر يمثل العنوان الأقل أهمية
مثال 1:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):
بعد ذلك احفظ المثال باتباع الخطوات السابقة (عد إلى الملاحظة 1 أعلاه) وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++ قائمة اسمها RUN اضغط عليها ثم اضغط على
Launch in Firefox وستظهر لك نتيجة الكود (انظر الصورة أدناه):
ملاحظة : عند ظهور نتائج عناوين HTML على متصفحك سوف تلاحظ أن متصفحك يترك بشكل تلقائي مساحات قبل وبعد كل عنوان (انظر الصورة أدناه):
2- أهمية العناوين :
*تستخدم محركات البحث العناوين لفهرسة وترتيب بنية ومحتوى صفحات الويب الخاصة بك
*يتأكد المستخدمون من صفحات موقعك حسب عناوينها من المهم استخدام العناوين لإظهار بنية الملف
نستخدم عنصر <h1> للعناوين الرئيسية مثل : اسم مدونتك، خبر هام، عنوان موضوع، أو تدوينة...
نستخدم عنصر <h2> للعناوين الرئيسية الأقرب أهمية لعناوين عنصر <h1>
نستخدم عنصر <h3> للعناوين الرئيسية الأقرب أهمية لعناوين عنصر <h2>
نستخدم عنصر <h4> للعناوين الرئيسية الأقرب أهمية لعناوين عنصر <h3>
نستخدم عنصر <h5> للعناوين الرئيسية الأقرب أهمية لعناوين عنصر <h4>
نستخدم عنصر <h6> للعناوين الأقل أهمية مثل : شرح كلمات مصغرة، ملاحظات بسيطة أسفل النص
ملاحظة : لا تستخدم عناوين HTML لتكبير النص أو تصغيره أو جعل الكلمات سوداء Bold فهناك عناصر وخاصيات مخصصة لهذه الأمور
3- عناوين أكبر:
كل عنوان HTML له حجم افتراضي ومع ذلك، فيمكنك تحديد حجم أي عنوان باستخدام خاصية style التي درسناها في درس سابق من هذه الدورة
مثال 2:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):
بعد ذلك احفظ المثال باتباع الخطوات السابقة (عد إلى الملاحظة 1 أعلاه) وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++ قائمة اسمها RUN اضغط عليها ثم اضغط على
Launch in Firefox وستظهر لك نتيجة الكود (انظر الصورة أدناه):
4 - القاعدة الأفقية:
نعرف القاعدة الأفقية بالعنصر <hr> وهي عبارة عن الخط الفاصل بين أسطر محتوى HTML ولكي تفهم معي أكثر تابع معي هذا المثال:
مثال 3:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):
بعد ذلك احفظ المثال باتباع الخطوات السابقة (عد إلى الملاحظة 1 أعلاه) وبعد انتهاءك من خطوات حفظ الملف أو المثال ستجد في محرر النصوص Notepad++ قائمة اسمها RUN اضغط عليها ثم اضغط على
Launch in Firefox وستظهر لك نتيجة الكود (انظر الصورة أدناه):
إلى هنا نكون وصلنا إلى نهاية درسنا والذي تناولنا فيها بالشرح والتحليل الدرس السادس من سلسلة دروس دورة تعلم واحتراف لغة HTML على مدونة حوحو للمعلوميات .
لاحقا الدرس السابع : الفقرات في HTML
إذا فاتكم شرح الدرس الأول على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تبدأ معي هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 1
إذا فاتكم شرح الدرس الثاني على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 2
إذا فاتكم شرح الدرس الثالث على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 3
إذا فاتكم شرح الدرس الرابع على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 4
أما إذا فاتكم شرح الدرس الرابع على مدونة حوحو للمعلوميات اضغط فقط على هذا الرابط لكي تتابع مسار هذه الدورة : دورة تعلم واحتراف لغة HTML مع حوحو – الدرس 5
سوف تحتاجون إلى محرر النصوص الذي تكتب عليه الأكواد يمكنكم تحميله من هنا : Notepad++
ملاحظة 1 : سأذكرك أنه عندما تكتب أي مثال لأكواد HTML على محررNotepad++ يجب عليك حفظ هذا المثال أو الملف بصيغة HTML ) انظر الصورة أدناه ):
مثال : نتحدث عن الوسم المفتوح <a> ومقابله الوسم المغلق </a> وهذين الوسمين يجمعهما العنصر<a> الذي يرمز للروابط في لغة HTML ويجمع الوسمين السابقين.
الدرس 6: العناوين في HTML
1- تعريف:
إذا لاحظت في الجرائد والمجلات وصفحات الويب بعض العناوين البارزة وتجد العنوان الرئيسي هو الأكثر وضوحا والأكبر حجما كي يجذب القارئ وهنا تتساءل كيف يمكنني الحصول على هذه العناوين أو كتابتها على شكل كود HTML
نعرف العناوين في HTML على أنها الكلمات ذات الأحجام المختلفة التي تظهر في صفحات الويب ( انظر الصورة أدناه ):
h1, h2, h3, h4, h5, h6
h1 : هذا العنصر يمثل العنوان الأكثر أهمية
h2, h3, h4, h5 : هاته العناصر تمثل بالتدرج العناوين من الأكثر أهمية إلى الأقل أهمية
h6 : هذا العنصر يمثل العنوان الأقل أهمية
مثال 1:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):
Launch in Firefox وستظهر لك نتيجة الكود (انظر الصورة أدناه):
2- أهمية العناوين :
*تستخدم محركات البحث العناوين لفهرسة وترتيب بنية ومحتوى صفحات الويب الخاصة بك
*يتأكد المستخدمون من صفحات موقعك حسب عناوينها من المهم استخدام العناوين لإظهار بنية الملف
نستخدم عنصر <h1> للعناوين الرئيسية مثل : اسم مدونتك، خبر هام، عنوان موضوع، أو تدوينة...
نستخدم عنصر <h2> للعناوين الرئيسية الأقرب أهمية لعناوين عنصر <h1>
نستخدم عنصر <h3> للعناوين الرئيسية الأقرب أهمية لعناوين عنصر <h2>
نستخدم عنصر <h4> للعناوين الرئيسية الأقرب أهمية لعناوين عنصر <h3>
نستخدم عنصر <h5> للعناوين الرئيسية الأقرب أهمية لعناوين عنصر <h4>
نستخدم عنصر <h6> للعناوين الأقل أهمية مثل : شرح كلمات مصغرة، ملاحظات بسيطة أسفل النص
ملاحظة : لا تستخدم عناوين HTML لتكبير النص أو تصغيره أو جعل الكلمات سوداء Bold فهناك عناصر وخاصيات مخصصة لهذه الأمور
3- عناوين أكبر:
كل عنوان HTML له حجم افتراضي ومع ذلك، فيمكنك تحديد حجم أي عنوان باستخدام خاصية style التي درسناها في درس سابق من هذه الدورة
مثال 2:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):
Launch in Firefox وستظهر لك نتيجة الكود (انظر الصورة أدناه):
نعرف القاعدة الأفقية بالعنصر <hr> وهي عبارة عن الخط الفاصل بين أسطر محتوى HTML ولكي تفهم معي أكثر تابع معي هذا المثال:
مثال 3:
انقل الكود الظاهر على الصورة كما هو حرفيا واكتبه على محرر النصوص Notepad++ ( انظر الصورة أدناه ):
Launch in Firefox وستظهر لك نتيجة الكود (انظر الصورة أدناه):
لاحقا الدرس السابع : الفقرات في HTML
from حوحو للمعلوميات https://ift.tt/2Ki1c0O
via IFTTT
0 التعليقات:
إرسال تعليق