دورة تعلم لغات البرمجة - الدرس الاول ( اساسيات html)

لسلام عليكم ورحمة الله وبركاته

احبتي اعضاء وزوار لايت مون  

اليوم ان شاء الله سوف نتناول اول دروس تعلم لغات البرمجة واليوم سوف نبدأ مع اول درس في الدورة
سوف نبدأ على بركة الله في html

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

نبدأ الأن الدرس


اليوم سوف نتناول اول دروس تعلم html وسوف نتكلم في هذا الدرس عن html وكيفية عملها
عزيزي الطالب لغة html من الغات السهلة جدآ وهي غير معقدة وسهلة الاستخدام والتعلم طيب لو كنت طالب مبتدأ وتريد ان تتعلم يتوجب عليك ان تفهم ماهي html واين تستخدم انت الان لو دخلت الى موقع مثال موقع مدرسة المستقبل التعليمية سوف تلاحظ انه المدرسة فيها تصميم مكون من صور والالوان والخطوط والقوائم الجانبية هذه كلها تم عملها بواسطة html اي بمعنى انه html هي الهيكلية او هيكل الموقع او الشكل الظاهر هناك شيء اخر يتوجب عليك ان تفهمه وهو css تعتبر css شيء مكمل الى html لانه css مسؤول عن الالوان والخطوط اي انه مسؤول عن جمالية التصميم لكن اكود css تكون مفصولة عن اكواد html دعن الان من css سوف نتكلم عنها ونتعلمها بعد دورة html ان شاء الله الان نرجع الى html سوف نتكلم الان عن كل وسم خاص في html تابع معي .... انت لما تشاهد الان صفحة الموقع سوف تشاهدها مكونة من هيدر (headr) و جسم الصفحة (body) و ذيل الصفحة (footer) الان نتطرق الى كتابة الاكواد الخاصة في صفحة html اول شيء يجب ان تبدآ صفحة html بوسم الفتح الخاص ب html ويكتب بهذا الشكل :
تابع معي الكود التالية :

رمز PHP:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
الكود تبين لك طريقة كتابة كل وسم في صفحة html تابع
الرقم 1 في الكود هو بداية وسم صفحة html اي بمعنا انه اخبرنا المتصفح انه هذه الصفحة تحتوي على اكواد تنتمي الى صفحة html اما الرقم 7 هو اغلاق وسم html اغلب وسوم html فيها بداية للوسم واغلاق للوسم كما عملنا في بداية كتابة html انظر الى الكود وتابع فيها الارقام 1 و 7 طيب بعد ما كتبنا وسم بداية واغلاق صفحة html هناك امور اخرى يجب كتابتها وهي head و title و body سوف نتكلم عن head وتابع في الكود الارقام 2 و 4 لو تلاحظ عزيزي الطالب وسم head يتكون من فتح واغلاق الفتح في الرقم 2 والاغلاق في الرقم 4 طيب سوف نتعرف الان عن وسم head هذا الوسم يكون فيه اكواد الميتا Meta وهي user meta variable و الترميز encoding و اوامر css الـ style و عنوان الصفحة title.
الان نشرح كل واحد منهم : meta :-
في وسم head هناك meta يتم وضعها وسوف اشرح لكم الشيء المهم فيها وهو user meta variable والاهم في user meta variable هو description و keywords تابع معي
بالنسبة الى description فهي مسؤولة عن الوصف الخاص في الموقع مثل انا لدي صفحة اضع فيها دروس وهذه الصفحة اريد ان اعطيها وصف لذالك سوف استخدم description لوضع وصف للصفحة لكن هذا الوصف لايظهر امام الزائر او من يتصفح هذه الصفحة وانما هذا الوصف سوف يكون مهم لمحركات البحث اي بمعنى اننا قمنا بعمل وصف لمحركات البحث لكي تتعرف على الصفحة وتم هذا الوصف عن طريق description وطريقة كتابة كود الميتا meta description يكون بهذه الطريقة


رمز PHP:


شرح الكود meta description : تكلمت سابقآ عن الفتح والاغلاق اعلم عزيزي الطالب انه اكواد meta كذالك فيها فتح واغلاق لكن تختلف في شيء واحد اكود meta وهو الاغلاق طيب كيف تختلف سوف اشرح لك الاختلاف نحن عندما تكلمنا عن فتح واغلاق وسم html قلنا يتم بهذه الطريقة


رمز PHP:
// الفتح
// الاغلاق
لكن اكود meta تختلف عن html في الفتح والاغلاق ويتم اغلاقها فقط بهذه الطريقة

رمز PHP:
/>
لا اريد ان اطيل عليكم الدرس لكن احاول ان اشرح لك بالتفصيل حتى تفهم فائدة الكود وطريقة كتابته نكمل درسنا هنا عرفنا meta و اخبرنا html انه هذا وسم meta اما name فهو اسم او نوع سطر meta و content هي محتوى او مضمون هذه meta طيب بما نحن عرفنا اسم meta بـ description اي يعني انه هذه meta هي للوصف وفي الاخير الاغلاق وهو كالتالي

رمز PHP:
/>
طيب لدينا meta اخرى يكون اسمها keywords وهي للكلمات الدليلية وتكتب بهذا الشكل

رمز PHP:

طريقة كتابة هذه meta هي نفس طريقة كتابة meta description لكن الاسم الخاص فيها name هو keywords اي يعني انه اخبرنا html انه هذه meta هي خاصة في الكلمات الدليلية وهناك فرق بين الوصف والكلمات الدليلية طيب الان ننتقل الى شيء اخر وهو encoding تابع معي ...
encoding هو خاص بالترميز وهو من انواع meta ومهم جدآ في صفحات html لنتعرف اكثر على encoding
encoding هو ترميز الصفحة طيب كيف يعني ترميز الصفحة انا اقولك كيف الصفحة انت لما تكتب فيها اللغة العربية تحتاج الى تعريف او ترميز يسمى encoding هذا الترميز يتوجب عليك وضعه والسبب هو حتى لاتحدث مشاكل في اللغة او الكتابة التي تحتويها الصفحة بالنسبة الى encoding الترميز هناك اكثر من نوع ومن انواع الترميز windows-1256 وهو مايسمى arabic windows والترميز iso-8859-2 وهو مايسمى ISO والترميز utf-8 هناك انواع اخرى من الترميز لكن انت غير مجبر انك تتعلمها او تتعرف عليها جميعها طيب ماهو افضل ترميز encoding عزيزي الطالب افضل ترميز للصفحات هو utf-8 ترميز رائع جدآ لانه يعمل معك بدون اي مشاكل وبالاخص مع اللغة العربية وطريقة كتابته تكون كالتالي :


رمز PHP:

سوف اشرح لك فقط المهم في الكود وهو content و charset
لو تلاحظ عزيزي الطالب انه content قيمتها هي text/html هذا يعني عرفنا الترميز لصفحة html وانا قلت لكم ماهي content وهي المحتوى او المضمون اما charset فهي نوع الترميز ولو تلاحظ نوع الترميز الذي تم وضعه هو utf-8
بالنسبة الى meta كبداية يكتفي انك تعرف فقط description و keywords و encoding ليس بمعنا انه فقط هذه انواع meta هناك انواع اخرى سوف نتطرق لها في دروس اخرى لكن هذه meta التي تكلمنا عنها هي كشيء اساسي في صفحات html.
الان ننتقل الى وسم title يكتب وسم title بهذا الشكل

رمز PHP:

وسم title ياخذ عنوان الصفحة مثل انا لدي صفحة مختصة في تعلم دروس html واريد ان اعطي لهذه الصفحة اسم سوف اضع الاسم الخاص في الصفحة بين وسمي title ويتم بهذ الشكل

رمز PHP:


عزيزي الطالب انت تعلمت الان اهم الاكواد التي توضع في head وهي فتح واغلاق كود head و في داخلهما meta والتي تتكون من description وهو وصف الصفحة و keywords الكلمات الدليلية للصفحة و encoding ترميز الصفحة و title هو لعنوان الصفحة هذه اكواد meta توضع جميعها داخل وسوم head وهي لاتظهر للزائر الذي يتصفح الصفحة وانما هي فقط تعريف للصفحة وللمتصفح ولمحركات البحث والذي يظهر في الصفحة فقط هو title وهو الخاص بعنوان الصفحة اما الترميز والوصف والكلمات الدليلية لاتظهر على الصفحة بقى شيء اخر يوضع داخل وسوم head وهو style هذا سوف نتعرف عليه في دورة css ان شاء الله.
وفي الاخير كود head لدينا الان كالتالي :

رمز PHP:






الان سوف ننتقل الى وسمي body تابع الكود التالي :

رمز PHP:

وسوم body يكون بينهما محتوى الصفحة طيب ماهو محتوى الصفحة ؟؟ محتوى الصفحة عزيزي الطالب هو ما تشاهده عندما تدخل الى الصفحة وهو الهيدر header و القوائم الجانبية قائمة والوسط وهذا يعود حسب توزيعك للتصميم بالاضافة الى الفوتر footer وهو ذيل الصفحة الذي غالبآ يكون فيه حقوق الموقع الاضافة الى ذالك عزيزي الطالب انت تستطيع ان تضع حتى ولو كلمة واحد تحت body وتعطيها تنسيق مثل الون وحجم الخط واتجاه النص وغير ذالك انت لست مجبر ان تضع فقط الجداول وغيرهم في body وان شاء الله هذا سوف يكون في الدروس القادمة بأذن الله وان شاء الله سوف تكون محترف في html طيب بقى لدينا شيء اخير حتى ننتهي من الدرس الاول وهو امتداد الملفات عزيزي الطالب عندما تريد ان تحفظ ملف من نوع html يتوجب عليك ان تضعه الامتداد الخاص فيه اما html او htm هذه هي الامتدادات الخاصة في ملفات html وهذا شرط يتوجب عليك ان تعمله وهو عندما تقوم بعمل صفحة من نوع html يجب ان يكون الامتداد الخاص فيها اما html او htm الى هنا ينتهي درسنا الاول من سلسلة دروس تعلم html واسف على الاطالة لكن انا اريد انا اعلمكم كل صغيرة وكبيرة وبالتفصيل وان شاء الله يكون الشرح سهل وسلس وحتى تفهم اكثر راجع الدرس اكثر من مرة وطبق مع كل درس وحاول ان تبتعد عن نسخ الاكواد واعتمد على نفسك حتى تتعلم بشكل الصحيح وفي الاخير سوف اعطيكم كود صفحة html بالكامل للمراجعه
 تابع الكود التالي :   

الكود:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="وصف الصفحة" />
<meta name="keywords" content="كلمات دليلية للصفحة" />
<title<lightmoon</title>
</head>
<body>
بسم الله الرحمن الرحيم
lightmoon

 


</body>
</html>

الى هنا ينتهي هذا الدرس ان شاء الله يكون سهل عليكم وهذا الدرس ماهو الى بداية الدخول الى html انتظرونا في الدرس القادم ان شاء الله