شرح 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) والتي تعرض لك كل الاكواد بلون واحد وبدون فراغات وتنسيقات.
أما بالنسبة لمحررات الأكواد المتطورة كثيرة جداً، وكل محرر وله مميزاته لكن تبقى كلها أدوات تقوم بنفس المهمة وهي تحرير أكواد البرمجة. ولذلك قم باختيار المحرر الذي يناسبك.
أما إذا لم تكن تعرف أي محرر أكواد فدعني أعرض عليك بعض أشهر محررات الأكواد وروابط تحميلها.
- محرر نوتباد بلس بلس Notepad ++ Editor.
- سابلايم تيكست Sublime Text Editor.
- محرر براكتس Bracktes 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 لك.
بنية صفحة 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 بالعربية والمزيد من العناصر والأكواد البرمجية، فانتظرونا في دروس شرح html القادمة إن شاء الله.
يسعدنا إضافة تعلقيك علي مقالاتنا، ونرجو منك إضافة تعليق يتعلق بنفس هذا الموضوع.