القائمة الرئيسية

الصفحات

مقدمة كورس تعلم لغة html اتش تي ام ال

مقدمة كورس تعلم لغة html اتش تي ام ال  . هل تبحث عن كورس لغة html ( اتش تي ام ال ) لتعلم برمجة وتطوير مواقع الويب ؟ إذاً فأنت في المكان الصحيح . ففي هذا الكورس سنأخذكم في رحلة ممتعة لإستكشاف خبايا لغة Html من الصفر الى الإحتراف . عن طريق شروحات سهلة وبسيطة للمبتدئين بالاضافة لأمثلة  بالأكواد البرمجية .

مقدمة كورس تعلم لغة html

ما هي لغة html ( اتش تي ام ال ) ؟

لغة html ( اتش تي ام ال ) لا تعتبر لغة برمجة على عكس لغات أخرى مثل CSS, Javascript . وإنما Html تعتبر لغة وصفية أو لغة الترميز حيث تقوم بتوصيف مكونات صفحة الويب ومحتوياتها . وقد تم تطوير Html من طرف السير تيم برنرز لي Tim Berners Lee سنة 1990 م .

وتستخدم لغة html في انشاء صفحات الويب ويتم عرضها على المتصفح . وتتكون كل صفحة من عناصر مركبة بطريقة منظمة . وكل صفحة تحتوى على الروابط التشبعية لصفحات أخرى لتجتمع في رابط واحد وتكون موقع إلكتروني Site Web . 

وتوفر لنا لغة html ( اتش تي ام ال ) العديد من العناصر والمكونات لعرض أي عنصر في صفحة الويب . فمثلاً توفر لنا عناصر لرفع الصور والفيديوهات إلى صفحتنا وتوفر لنا عناصر أخرى لكتابة نصوص منسقة .

وكلمة Html هي إختصار لـ 4 كلمات وهما ( Hyper Text Markup Language ) وهي لغة ترميز النصوص التشبعية .

ولكى نفهم أكثر الدور الجوهري لـ لغة html في تطوير مواقع الويب ، يمكنك تشبيه صفحة الويب بالمنزل . وعند البدء في بناء منزل يتم وضع تخطيط مسبق للمنزل ومكوناته ومن ثم يتم بناء الأساسات والجدران .

وهذا ما يحدث عند بناء صفحة الويب بحيث يتم وضع تخطيط لمكونات الصفحة . ومن ثم نقوم بالبدء بوضع مكونات الصفحة عن طريق لغة html . وبعدها نقوم بتنسيق الصفحة ووضع كل مكون في مكانه الصحيح مع تغيير الألوان والخطوط والأشكال عن طريق لغة التصميم Css .

تهيئة بيئة العمل في لغة html

للبدأ في تعلم لغة الترميز Html يجب أولا تجهيز بيئة العمل وتوفير الأدوات اللازمة لتطوير صفحات الويب . وللبدأ في كتابة لغة html نحتاج الى أداتين وهما :-

1- محرر الأكواد Code Editor

 وهو عبارة عن برنامج نقوم بكتابة الاكواد البرمجية فيه وإنشاء ملفات جديدة . ويحتوي على كل الأدوات اللازمة لتطوير أي مشروع ، وبالنسبة لمحرر الأكواد يمكن الكتابة في محرر النصوص الإفتراضي Notepad في حاسوبك .

لكن رغم أنه يؤدي مهمة تحرير الأكواد البرمجية إلا أنه ليس الخيار الأفضل . لأنه لا يساعدك في كتابة أكواد البرمجة بطريقة منسقة ومنظمة ولذلك لا ينصح به بتاتا . فمحررات الأكواد المتطورة تقوم بتلوين الأكواد كما تقوم بتلوين النصوص بلون معين . والعناصر Tags بلون معين والخصائص Attribute بلون آخر. فعند القاء نظرة على الكود يتضح لك جليا كل مكوناته ويفتح لك الشهية لقرائته وكتابة المزيد من الأكواد البرمجية على عكس مفكرة Notepad والتي تعرض لك كل الاكواد بلون واحد وبدون فراغات وتنسيقات .

أما بالنسبة لمحررات الأكواد المتطورة كثيرة جداً وكل محرر وله مميزاته لكن تبقى كلها أدوات تقوم بنفس المهمة وهي تحرير أكواد البرمجة . لذلك قم بإختيار المحرر الذي يناسبك .

أما إذا لم تكن تعرف أي محرر أكواد فدعني أعرض عليك بعض أشهر محررات الأكواد وروابط تحميلها .
بعد تحميل محرر الاكواد الذي يناسبك وتنصيبه فانت قمت بتجهيز الأداة الأولى . 

2- متصفح الإنترنت Internet browser  

دور المتصفح هو تشغيل صفحات Html وعرض مكوناتها . ويمكنك العمل بالمتصفح الذي يناسبك سواء كان Google Chrome أو غيره . فلا فرق بينهما لكن حاول الابتعاد عن المتصفحات الكلاسيكية والقديمة مثل Internet Explorer . لأنها متصفحات تقليدية ولا تدعم العديد من العناصر والمميزات الجديدة في لغة html فحاول تجنبها .

وبعد تجهيز محرر الأكواد والمتصفح يمكننا الآن البدء في كتابة الصفحات بـ لغة html .

كيفية عمل صفحة ويب بلغة html

الخطوة الأولى هي إنشاء مجلد Folder يكون هو الملف الحاضن للمشروع وقم بتسميته أي اسم تريده وبداخل الملف قم بإنشاء ملف File وسميه مثلاً  ( index ) وله إمتداد .html أو .htm الامتداد مهمته هي تعريف نوع الملف .

ويمكنك إنشاء الفولدر والفايل عن طريق الترمنال Terminal لتقوم بعمل ملف قم بتنفيذ الأمر التالي mkdir firstProject بحيث اسم الفولدر هو FirstProject ومن ثم قم بالدخول إلى مسار الملف عن طريق الأمر cd firstProject ومن ثم قم بإنشاء فايل Html عن طريق الامر Touch index.html .

وبعد تجهيز المشروع الآن قم بفتحه عن طريق برنامج محرر الاكواد Code Editor والذي قمت بتنصيبه. وإفتح ملف Index.html وأكتب فيه الكود كما في الصورة أسفله .

كود بلغة html
وبعد كتابة الكود السابق نقوم بفتح ملف ( index.html ) في المتصفح وتظهر لنا رسالة ترحيبية ( Hello World ) وهنا تكون قد قمت ببرمجة أول صفحة بلغة html لك .

بنية صفحة Html ( مكونات صفحة اتش تي ام ال )

في المثال السابق الذي قمنا بتطبيقه هناك الكثير من العناصر والأكواد البرمجية في الصورة . لذلك قد تقوم بطرح عدة أسئلة عن هذه العناصر ؟ ما دور كل عنصر ؟ ولذلك في هذا القسم سوف نتعرف على بنية صفحة Html . وعلى العناصر الأساسية التي تشكل صفحة Html .

بنية صفحة html

1- عنصر <!DOCTYPE html>

هو أول عنصر في الصفحة  ويسمى بادئة الصفحة وهو إختصار لـ ( Document Declaration Type ) وترجمته معرف نوع الوثيقة .

ومهمة هذا العنصر هو تعريف المتصفح نوع الملف وهذه البادئة هو لتعريف أن نوع الملف هو Html 5 .

وفي السنوات الماضية كان وجود هذا العنصر في الصفحة إلزاميا لكن الآن أصبحت كل صفحات Html عبارة عن Html5 . ولم يعد كتابة هذه البادئة أمراً الزاميا لكن يفضل كتابتها .

2- عنصر Html

هذا العنصر هو الذي يمثل صفحة Html ويعرف المتصفح على بداية ونهاية الصفحة . العنصر له وسم بداية <html> ووسم نهاية </hml>

ويعتبر عنصر الـ Head هو رأس الصفحة وغالبا يحتوي على عناصر ومعلومات تهم المتصفح . وكل العناصر التي تكتب في Head لا تظهر في صفحة Html باستثناء عنصر Title والذي يظهر أعلى يسار الصفحة .

ويمكن إضافة في العنصر Head تنسيقات Css أو إستدعاء لملف CSS خارجي أو ملفات جافا سكريبت Javascript . بالإضافة لروابط إستدعاء المكتبات والتقنيات البرمجية .

3- عنصر meta ( البيانات الوصفية )

تستخدم غالباً أكواد الميتا تاج لتوفير المعلومات للمتصفح مثل تعريف الصفحة أو الكلمات المفتاحية أو كاتب الصفحة أو الترميز . وكما في الصورة توجد أكواد Meta من النوع ( Charset ) أي الترميز.

وهدف هذا العنصر هو تحديد ترميز الصفحة وغالبا ما يكون ( utf-8 ) وهو الترميز العالمي الذي يدعم الكثير من اللغات بما فيها اللغة العربية . وهذا العنصر لا يحتوي على وسم نهاية .

4- عنصر Title ( العنوان )

 هذا العنصر هو الذي يظهر في أعلى يسار الصفحة ومهمته هو تحديد اسم لصفحة الويب أو موقع الويب للتفريق بينه وبين صفحة أخرى.

وهذا العنصر أيضا يحتوي على وسم بداية <title> و وسم نهاية </title> على عكس عنصر ال ( meta ) الذي يحتوي على وسم بداية فقط .

5- عنصر Body ( جسم الصفحة )

 كل عناصر صفحات الويب من صور ونصوص وفيديوهات وروابط تكتب في هذا العنصر . وكل ما يكتب في هذا العنصر يظهر في جسم الصفحة .

ويمكن أيضا في عنصر Body إستدعاء ملفات Javascript والمكتبات البرمجية .

وبما أنك وصلت إلى هنا فأنت جاهز للبدء في كورس تعلم لغة html والمزيد من العناصر والأكواد البرمجية . فإنتظرونا في الدروس القادمة .
reaction:
capsuleprog
capsuleprog
Full Stack Devloper

تعليقات