شرح HTML | كورس تعلم لغة HTML بالعربية
📢 مساحة إعلانية (أعلى المقال)
ضع هنا كود AdSense
ضع هنا كود AdSense
الحسام لتعليم اللغات البرمجية
ما هي لغة html ( اتش تي ام ال ) ؟
لغة html ( اتش تي ام ال ) لا تعتبر لغة برمجة على عكس لغات أخرى مثل CSS, Javascript. وإنما Html تعتبر لغة وصفية أو لغة الترميز حيث تقوم بتوصيف مكونات صفحة الويب ومحتوياتها. وقد تم تطوير Html من طرف السير تيم برنرز لي Tim Berners Lee سنة 1990 م.
وتستخدم لغة html في انشاء صفحات الويب ويتم عرضها على المتصفح. وتتكون كل صفحة من عناصر مركبة بطريقة منظمة. وكل صفحة تحتوى على الروابط التشبعية لصفحات أخرى لتجتمع في رابط واحد وتكون موقع إلكتروني Site Web.
وتوفر لنا لغة html (اتش تي ام ال) العديد من العناصر والمكونات لعرض أي عنصر في صفحة الويب. فمثلاً توفر لنا عناصر لرفع الصور والفيديوهات إلى صفحتنا وتوفر لنا عناصر أخرى لكتابة نصوص منسقة.
وكلمة Html هي إختصار لـ 4 كلمات وهما ( Hyper Text Markup Language ) وهي لغة ترميز النصوص التشبعية.
ولكى نفهم أكثر الدور الجوهري لـ لغة html في تطوير مواقع الويب ، يمكنك تشبيه صفحة الويب بالمنزل. وعند البدء في بناء منزل يتم وضع تخطيط مسبق للمنزل ومكوناته ومن ثم يتم بناء الأساسات والجدران.
وهذا ما يحدث عند بناء صفحة الويب بحيث يتم وضع تخطيط لمكونات الصفحة. ومن ثم نقوم بالبدء بوضع مكونات الصفحة عن طريق لغة html. وبعدها نقوم بتنسيق الصفحة ووضع كل مكون في مكانه الصحيح مع تغيير الألوان والخطوط والأشكال عن طريق لغة التصميم Css.
لغة 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) والتي تعرض لك كل الاكواد بلون واحد وبدون فراغات وتنسيقات.
أما بالنسبة لمحررات الأكواد المتطورة كثيرة جداً، وكل محرر وله مميزاته لكن تبقى كلها أدوات تقوم بنفس المهمة وهي تحرير أكواد البرمجة. ولذلك قم بإختيار المحرر الذي يناسبك.
أما إذا لم تكن تعرف أي محرر أكواد فدعني أعرض عليك بعض أشهر محررات الأكواد وروابط تحميلها.
://
محرر نوتباد بلس بلس Notepad ++ Editor.
سابلايم تيكست Sublime Text Editor.
محرر براكتس Bracktes Editor.
اتوم Atom Editor.
محرر فيجوال ستوديو كود Vs Code Editor.
بعد تحميل محرر الاكواد الذي يناسبك وتنصيبه فانت قمت بتجهيز الأداة الأولى.
2- متصفح الإنترنت Internet browser
دور المتصفح هو تشغيل صفحات Html وعرض مكوناتها. ويمكنك العمل بالمتصفح الذي يناسبك سواء كان Google Chrome أو غيره فلا فرق بينهما. لكن حاول الابتعاد عن المتصفحات الكلاسيكية والقديمة مثل Internet Explorer. لأنها متصفحات تقليدية ولا تدعم العديد من العناصر والمميزات الجديدة في لغة html فحاول تجنبها.
وبعد تجهيز محرر الأكواد والمتصفح يمكننا الآن البدء في شرح html بداية من كتابة الصفحات بـ لغة html.
1- محرر الأكواد Code Editor
وهو عبارة عن برنامج نقوم بكتابة الاكواد البرمجية فيه وإنشاء ملفات جديدة. ويحتوي على كل الأدوات اللازمة لتطوير أي مشروع، وبالنسبة لمحرر الأكواد يمكن الكتابة في محرر النصوص الإفتراضي (Notepad) في حاسوبك.
لكن رغم أنه يؤدي مهمة تحرير الأكواد البرمجية إلا أنه ليس الخيار الأفضل. لأنه لا يساعدك في كتابة أكواد البرمجة بطريقة منسقة ومنظمة ولذلك لا ينصح به بتاتاً. فمحررات الأكواد المتطورة تقوم بتلوين الأكواد كما تقوم بتلوين النصوص بلون معين. والعناصر (Tags) بلون معين والخصائص (Attribute) بلون آخر. فعند القاء نظرة على الكود يتضح لك جليا كل مكوناته ويفتح لك الشهية لقرائته وكتابة المزيد من الأكواد البرمجية. على عكس مفكرة (Notepad) والتي تعرض لك كل الاكواد بلون واحد وبدون فراغات وتنسيقات.
أما بالنسبة لمحررات الأكواد المتطورة كثيرة جداً، وكل محرر وله مميزاته لكن تبقى كلها أدوات تقوم بنفس المهمة وهي تحرير أكواد البرمجة. ولذلك قم بإختيار المحرر الذي يناسبك.
أما إذا لم تكن تعرف أي محرر أكواد فدعني أعرض عليك بعض أشهر محررات الأكواد وروابط تحميلها.
://
محرر نوتباد بلس بلس Notepad ++ Editor.
سابلايم تيكست Sublime Text Editor.
محرر براكتس Bracktes Editor.
اتوم Atom Editor.
محرر فيجوال ستوديو كود Vs Code Editor.
بعد تحميل محرر الاكواد الذي يناسبك وتنصيبه فانت قمت بتجهيز الأداة الأولى.
2- متصفح الإنترنت Internet browser
دور المتصفح هو تشغيل صفحات Html وعرض مكوناتها. ويمكنك العمل بالمتصفح الذي يناسبك سواء كان Google Chrome أو غيره فلا فرق بينهما. لكن حاول الابتعاد عن المتصفحات الكلاسيكية والقديمة مثل Internet Explorer. لأنها متصفحات تقليدية ولا تدعم العديد من العناصر والمميزات الجديدة في لغة html فحاول تجنبها.
وبعد تجهيز محرر الأكواد والمتصفح يمكننا الآن البدء في شرح html بداية من كتابة الصفحات بـ لغة html.
📢 مساحة إعلانية (أسفل المقال)
كيفية عمل صفحة ويب بلغة html
الخطوة الأولى هي إنشاء مجلد Folder يكون هو الملف الحاضن للمشروع وقم بتسميته أي اسم تريده. وبداخل الملف قم بإنشاء ملف File وسميه مثلاً ( index ) وله إمتداد .html أو .htm الامتداد مهمته هي تعريف نوع الملف.
ويمكنك إنشاء الفولدر والفايل عن طريق الترمنال Terminal لتقوم بعمل ملف قم بتنفيذ الأمر التالي (mkdir firstProject). بحيث اسم الفولدر هو FirstProject ومن ثم قم بالدخول إلى مسار الملف عن طريق الأمر (cd firstProject). ومن ثم قم بإنشاء فايل Html عن طريق الامر (Touch index.html).
وبعد تجهيز المشروع الآن قم بفتحه عن طريق برنامج محرر الأكواد (Code Editor) والذي قمت بتنصيبه. وإفتح ملف (Index.html) وأكتب فيه الكود كما في الصورة أسفله.
وبعد كتابة الكود السابق نقوم بفتح ملف ( index.html ) في المتصفح. وتظهر لنا رسالة ترحيبية ( Hello World ) وهنا تكون قد قمت ببرمجة أول صفحة بلغة html لك.
ويمكنك إنشاء الفولدر والفايل عن طريق الترمنال Terminal لتقوم بعمل ملف قم بتنفيذ الأمر التالي (mkdir firstProject). بحيث اسم الفولدر هو FirstProject ومن ثم قم بالدخول إلى مسار الملف عن طريق الأمر (cd firstProject). ومن ثم قم بإنشاء فايل Html عن طريق الامر (Touch index.html).
وبعد تجهيز المشروع الآن قم بفتحه عن طريق برنامج محرر الأكواد (Code Editor) والذي قمت بتنصيبه. وإفتح ملف (Index.html) وأكتب فيه الكود كما في الصورة أسفله.
وبعد كتابة الكود السابق نقوم بفتح ملف ( index.html ) في المتصفح. وتظهر لنا رسالة ترحيبية ( Hello World ) وهنا تكون قد قمت ببرمجة أول صفحة بلغة html لك.
بنية صفحة Html ( مكونات صفحة اتش تي ام ال )
في المثال السابق الذي قمنا بتطبيقه هناك الكثير من العناصر والأكواد البرمجية في الصورة. لذلك قد تقوم بطرح عدة أسئلة عن هذه العناصر ؟ ما دور كل عنصر ؟ ولذلك في هذا القسم سوف نتعرف على بنية صفحة Html.
1- عنصر DOCTYPE html
هو أول عنصر في الصفحة ويسمى بادئة الصفحة وهو إختصار لـ ( Document Declaration Type ).
2- عنصر Html
يمثل صفحة Html ويعرف المتصفح على بداية ونهاية الصفحة.
3- عنصر meta
تستخدم لتحديد معلومات الصفحة مثل الترميز utf-8.
4- عنصر Title
يحدد عنوان الصفحة ويظهر في المتصفح.
5- عنصر Body
يحتوي كل محتوى الصفحة من نصوص وصور وفيديو.
وبهذا نكون قد أنهينا أول درس في HTML.
1- عنصر DOCTYPE html
هو أول عنصر في الصفحة ويسمى بادئة الصفحة وهو إختصار لـ ( Document Declaration Type ).
2- عنصر Html
يمثل صفحة Html ويعرف المتصفح على بداية ونهاية الصفحة.
3- عنصر meta
تستخدم لتحديد معلومات الصفحة مثل الترميز utf-8.
4- عنصر Title
يحدد عنوان الصفحة ويظهر في المتصفح.
5- عنصر Body
يحتوي كل محتوى الصفحة من نصوص وصور وفيديو.
وبهذا نكون قد أنهينا أول درس في HTML.
📢 مساحة إعلانية (أسفل المقال)