1- الدرس الأول : تعريف ب ,35111111
17 هي لغة بناء وهيكلة صفحات الويب اي من خلالها نقوم بانشاء مواقع بوهي تعتبر لغة سهلة وبسيطة التعلم وكذلك
الاستخدام وكذلك هي المفتاح او البداية الاولى لتعلم باقي لغات برمجة المواقع ك 111 او 451735 - بناء مواقع تفاعلية بين الزائر و الموقع
كتعريف بسيط للغة .1111111 هي مجموعة من الأكواد يقوم المتصفح بترجمتها حتى يظهر المحتوى حسب المظهر المطلوب.
والذي يعتبر اخر اصدار من .111111 وتم ادراج مع هذا الاصدار خاصية 085 لتحكم أكثر في التنسيق و المظهر وذلك لمعالجة توافق
التصميم مع مختلف متصفحات الويب © وتم تعريف وثيقة ,111111 الى ثلاثة أتراع : تاد د لعصمتاتعصص اعممعسدوة
ليأتي بعده الاصدار 1.0 ,1111111 تعتبر نسخة أكثر تطورا ,111111؛ فلفطلاقا من هذا الاصدار أصبحنا نتكلم عن ,12:111711 ففي هذا
الاصدار تم اعادة بناء و هيكلة لغة ,111111 بقوانين و شروط لغة ,30111 لتصيح ,36111111 اختصار ل تيدع 1 برون11 عاتعصع):ت1
عبيمسيمما ملعملل
111115 : آخر اصدار من ,11111 ؛ يعد هذا الاصدار ثررة في مجال بناء مواقع انترنت بما تحتويه من امكانيات هائلة في البناء و
التصميم مثلا كتصميم الالعاب ؛ عرض الفيديو ... لم تكن متوفية في الاصدارات السابقة ‎٠‏ الا ان من عيوب هذا الاصدار أنه مازال غير مدعم
بشكل كامل من طرف المتصفحات الويب والتي تعتبر مسألة وقت فقط حيث ان أغلب المراقع المشهررة ك عايوه600 -- 1016 -
1- أول خطوة لأنشاء صفحة ,314111 :
لانشاء صفحة ويب تحتاج الى شيئين فقط برنامج كتابة كود ,1117111 هو هو عبارة عن محرر نصوص مثل برنامج 8م151 ©101الذي
يأتي افتراضي مع نظام 0005 ىر متصفح انترنيت لعرض محتوى الصفحة التي قمت بأنشاءها ك مثل متصفح 101:06
<©170107ويكون دوره عرض المحتوى بعد ترجمة/تحويل هذه لاأكواد الى الشكل المحدد
2- برنامج تحرير صفحة ,35111111 :
يوجد كثير من البرامج لكتابة الأكواد منها ما هو بز جاني فمثلاك ++16016180 و الذي
يعتبر البرنامج المفضل نظرا لسهولة تعامل معه ... يمكن تنزيله من الموقع الرسمي
هذه واجهة البرنامج بعد التنصيب
10111.00 06 تمن مرتلل ة10101 .1/1و 001 علمطلة2 ] : تمسح

من البرامج المدفوعة لتحرير وثيقة ,2117111 نجد من أشهرها برنامج :178000138076 00158 يمكنك تحميله من المرقع الرسمي
من ميزات هذا البرنامج انه يمكنك بناء صفحة .2111711 دون معرفة مسبقة ب ,11117111اي يآتي بواجهة رسومية تمكنك باضافة و
تعديل محتوى الصفحة : فمن يريد تعلم لغة ,11111و غيرها من اللغات الخاصة بانترنت ان يبتعد عن مثل هذه البرامج فالموقع الجيد
و القوي ها ما تنشئ ه انت وتكون على دراية تامة بمحتواه
3- متصفحات الويب :
تقوم متصفحات الانترنت بترجمة الأكواد التي انشأتها مسبقا في وثيقة .21111111 فتحول هذه الرموز أو الأكواد الى مظهر وشكل محدد و
مناسب فبذلك تلعب دور الوسيط فيصبح المحتوى مفهوم لزائر رو من بين أهم هذه المتصفحات نجد متصفح «17©170 + من المتصفحات
أخرى نجد عسهعط د ««©م0 ...._ الا أن «0؟178 يعتبر المتصفح المفضل عند مطوري الويب لما يتوفر عليه من اضافة هائلة
فان لم يكن عندك هذا المتصفح بعد فهذه هي الفرصة لتحميله وتنصيبه على جهازك - تحميل يز ع0. 102118 111717/: 116
4- تطبيق انشاء صفحة
بعد أن استعرضنا أهم ما سنحتاجه نأتي الى مرحلة انشاء صفحة ,21111111 فهنا سأعتبر أنك قمت بتحميل برنامج ++1010900 وى كذلك
*17]0 هذا اذا كنت متحمس لتعلم هذه اللغة التي ستأخذك الى علم بناء و برمجة المواقع الالكترونية اما اذا كنت فقط من أجل اطلاع و
القراءة و أن هذا المجال لا يعجبك (لا بأس أن تعرف كيف يتم بناء صفحة ويب أي ,2:117111 على الأقل حتى لا تكون دائم لاستهلاك
بدون معرفة) فيكفي برنامج 1604813108 الذي يأتي مع نظام 00085» افتراضيا ‏

بعد تنصيب برنامج ++24040180_ستجد تم انشاء ايقونة البرنامج على سطح المكتب على هذا الشكل
بعد تشغيل البرنامج ستجد واجهته على الشكل الموجود في الصوة أعلاه؛ في النافذة الوسطى من البرنامج يمكننا كتابة أكواد خاصة
سنأخذ مثالا بسيط عن كتابة كود
قم بكتابة الكرد التالي
استجد أننا قمنا بكتابة جملة " بسم الله الرحمان الرحيم " وقم بأحاطتها برمز من جهة الشمال <113> ومن جهة اليمين <03/> لا تعطي
أهمية لما تعنيه هذه الاكواد فذلك ستعرفه في الدروس القادمة انشاء الله ؛ بعدها نقوم بحفظ الملف اي ©5088 < ©1711 ستظهر لك نافذة حفظ
يحدد على ان هذا الملف عبارة عن ملف .1111111 و ليس شيء أخر وذلك حتى يتعرف عليه المتصفح +
8 :على 8836 مع اختيار مكان الحفظ المناسب ستجد الملف تم حفظه في المكان الذي حددته مسبقا يحمل ا
المتصفح الافتراضي عندك
ان لم يكن كذلك قم بتشغيل الملف عن طريق اختيار المتصفح

راع ©
م لها -كى ثز كتاف لل نهد ©
وبهذا تكون خطوت اول خطوة في عالم بناء مواقع انترنت واصبحت مستعد لتعلم فبصبر و الاجتهاد ستتعلم الكثير نصيحتي الا تكتفي
بالقراءة فقط اي طبق كل ما تتعلمه. فلا تتردد في أجوبة على أسئلتك بنفسك. مع الوقت ستدرك أنك اكتسبت الكثير من المعارف و المهارات .
2- الدرس الثاني : كيفية كتابة كود: 35111111
سبق و ان قلنا ان كود 21111117 هو مجموعة من الأكواد .هذه الأكواد تدعى وسوم 105 لكل وسم معين طريقة عرض محتوى خاصة
مثل 1:
نلاحظ أن كود ف
ن الوسمين نكتب المحتوى الذي نريد يظهر على المتصفح بالمظهر
الافتراضي الذي يحدده وسم نفسه بحيث لكل وسم طريقة عرض خاصة به ؛ فالوسم <> يقوم بعرض المحتوى على شكل فقرة.
يجب مراعاة أن وسم الاغلاق يجب يحتوي على علامة /© و بين هذ
نتيجة المتل 1:
خصقوة/>دروس بتقيق 3 688 .ص1
لقد تم اضافة خاصية العنوان»801 لتوضيح أن محتوى هو اسم لموقع انترئيت بحث لما تمرر مؤشر الفآرة تظهر نافذة صغيرة تحتوي عمى
القيمة : 061 .1015 171177-27
نتيجة المنال 2:
| دروم بفشيش]

إضافة خصائص يتم عن طريق ترك فراغ بين اسم الوسم ثم اسم الخاصية بعدها علامة تساوي ثم اضافة القيمة المناسبة للخاصية بشرط ان
القيمة يجب ان تكون بين مزدوجتين "8108؟" كما هو مرضح في المثال السابق .
كما يمكن ادراج عنصر او عناصر داخل عنصر بشكل متداخل كما في المثل التالي:
معد صعوو><و> .1
قمنا بادراج عنصر <«ع0> داخل عنصر <> كذلك يمكننا ادراج عناصر أخرى داخل <صوم»> وههذا...
3- الدرس اثلث : القواعد الأساسية لكتابة كود. 36111711
سنتعرف في هذا الدرس على القواعد الأساسية لكتابة كود 12111111 «وكذلك البنية التي تتكون منها وثيقة .21111111 ؛ كما سبق و
الأخطاء ليعمل بشكل صحيح في مختلف متصفحات الويب.
يجب كتابة الوسوم يوه 1 و الخصائص 00110185, بأحرف صغيرة.
منال 1:
العناصر التي لها وسم بداية من الضروري أن يكون لها وسم اغلاق.
مثال 2:
<713>اتصل يتاة3>
مثال 3:
متداخل اي اول وسم بداية يكون له اخر وسم اغلاق و الذي
الوسم الأول يعتبر الأب بالنسبة للوسم الذي يحتويه و الوسم الثاني يعتبر الابن بالنسبة للوسم
مثال 4:

مثال 5د
هذه أغلب و كل قواعد أساسية كتابة كود .12:117111 بطريقة صحيحة بدون أخطأً لنتقل للجزء الثاتي من الدرس لشرح بنية وثيقة
يبين الشكل أهم ما تحتويه وثيقة ,15111111 بحيث نجد بأعلى وثيقة 10110 اختصار ل «وتاند18 1708 7020801 يقرم بتحديد
اصدار ,12111111 ركذلك نرعه ( اعصوناتكصة» - 11©1ة) و 170012112 هو مجموعة من القوانين معرفة مسبقا تنظم عمل كود
بشكل صحيح بدون اخطاء ‎٠‏ نجد لكل اصدار له 1001371012 خاص به,
من كود 01001 » و من بين هنين الوسمين نضع بقية الوسوم الخاصة بللصفحة.
مباشرة داخل عنصر <[(120>نجد كل من وسم <0 60> . <00ط>
2- عنصر <> :
وسم <000>_داخل هذا الوسم نضع المعلومات الخاصة بالصفحة و التي لا تظهر مباشرة بالمتصفح حيث تحتوي على ست وسوم تقريبا
لكل وسم له دور خاص كوسم اسم الصفحة <116>ووسم تنسيق مظهر....
عناصر التي يمكن اندااتها المنصر <موده

وسم <ٍ00>_داخل هذا الوسم نضع المحتويات الصفحة من نصوص و صور و غيرها بحيث يعتبر جسم الصفحة الرئيسي ؛ فكل ما
< 00> لتظهر في المتصفح .
عناصر فلي يبن اضاتيا تسر روم
تقض ع ف اوتصيف ففاء عل عاط لق ام له .56 ,كل يفط ,3ف ,2ف ,81 ,8
4- الدرس الرابع : اضاقة تعليقات الى كود .11171111
أحيانا يكون من الضروري اضافة تعليق الى كرد لشرح عمله او لتوضع مشكل :حيث حتى لو اطلع شخص ثاني على الكود او رجوع اليه بعد
من الزمن تجد شرح يبين طريقة عمله ودوره.
نتيجة مثال 1

اوري اضافة تعليق الى كود لشرج حمله او تتوضع مشكل
أطلع شخص تاني على الكود او رجوع اليه يعد فترة من
. تزمن تجد شرع يبين طريقة مله ودورة
<تسدرة
يقوم المتصفح بتجاهل التعليقات اي ما هو مكتوب بين علامة - -!> و <- - ويعرض باقي المحتوى الصفحة؛ ويمكن مشاهدة تعليقات عن
طريق عرض كود الصفحة في المتصفح كما هو واضح في نتيجة المثال.
5 - الدرس الخامس : العنوان في: 351171711
يمكن ان تحتوي صفحة ,2111111 على عناوين ‎٠‏ مثلا عناوين نتصوص ؛ كما هو موجود تماما في الكتب و الجرائد والتي تكون مفتاح
الاساسي لقراءة نص معين وهي اختصار لكلمة, بيتك ه116
يتم اضافة العنوان في صفحة .11111111 عن طريق العنصر <1:1>؛ هذا العنصر يتكون من ست مستوياد
كل مستوى من هذا العخاصر يعرض المحتوى بحجم مختلف “٠بحيث‏ نجد العنصر <1:1>يقرم بعرض محتواه بحجم اكبر من العنصر <12>:
وكذلك <12> يعرض محتوى بحجم اكبر من <03>وهكذا ... كلما اقتربنا من اعنصر <6:>يأجذذ النتص حجماً أصغر من سابقه.
عناصر <16>..... <11>تندرج ضمن العناصر التي عبارة عن صندوق عم1افبعد كل وسم اغلاق للعنصر </1:1>يتم اضافة مطر جديد
العناصر التى يمكن اضافتها للعنصر ح6ط»...<1:>
المناصر التي يمكن تندرج يداخلها ح<6له...<01>

منال 1
نتيجة مثال 1
1- دروس بقشيش لتعلم البرمجة
2 - دروس لتعلم برمجة المواقع انترنت
3 - دروس 117
4 - القواعد الأساسية في 1117
5 - التعامل مع التصوص.
6- ريط سلسلة نصية
نلاحظ أن العنصر الأول يظهر حجم النص أكبر مقارنة مع باقي العناصر . وكلما اقتربنا من من العنصر <06>يأخذ النص حجم أصغر. وان
كل عنصر يتم اضافته في مطر جديد.
6- الدرس السادس : تقسيم صفحة: ,15111111
لتحكم أكثر في صفحة ,31111111 من الضروري تقسيمها الى اجزاء او فقرات وذلك لتكون اكثر تنظيما وحتى يسهل كذلك التعامل معها في
1- العنصر <م> :
يمكننا هذا العنصر بتقسيم محتوى الصفحة الى عدة فقرات ؛ حيث يكون المحتوى محصور بين بين وسمي <م>و </م>وهذا العخصر من
نوع 1108 يقوم افتراضيا باضافة سطر جديد سواء في البداية الفقرة او نهايتها وذلك للفصل بين محتوى قبله او الذي يأتي بعده مباشرة (
شاهد مثال ) .كما يمكن للعنصر <(>ان يحتوي على عناصر اخرى من نوع 006لا ولا يمكن ان يحتوي على عناصر من نوع. 1102
المناصر التي يمكن اضافتها للمنصر حو
العناصر التى يمكن ان يندرج داخلها <وي>
منال 1: