Full Stack

Training
To Build One App for Any Device and Platform

HTML5 Tutorial

1 Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫المقدمة‬

‫في الَعص‪9‬ر الَح ديث ب‪9‬اتت ُلغ‪9‬ات البرمج‪9‬ة ِم ن األم‪9‬ور ال‪9‬تي واظَب الُعلم‪9‬اء والمختص‪9‬ين على تطويره‪9‬ا‪ ،‬خصوًص ا في ظ‪9‬ل اختالف مع‪9‬ايير التكنولوجي‪9‬ا والُوص‪9‬ول‬
‫إلى بيئ‪9‬ة جدي‪9‬دة وُمختلف‪9‬ة تماًم ا عم‪9‬ا س‪9‬بق‪ ،‬لهذا ب‪9‬اتت الَبرمج‪9‬ة ج‪9‬زًءا أساس‪ً9‬يا من التق‪ّ9‬دم في الوص‪9‬ول ألش‪َ9‬ياء ُتس‪ّ9‬هل على البش‪9‬ر الَح ي‪9‬اة‪ ،‬ولع‪ّ9‬ل لغ‪9‬ة ‪HTML5‬‬
‫واحدة ِم ن هذه الُطرق والوسائل ‪.‬‬
‫قامت ‪ HTML5‬ب‪9‬التمكين من التص‪9‬ميم لمواق‪9‬ع ال‪9‬ويب وأيًض ا جعلت من ظهوره‪9‬ا ممكًن ا بش‪9‬كلها الَح الي ع‪9‬بر ِنظ‪9‬ام وأساس‪9‬يات تتب‪9‬ع لترم‪9‬يز بس‪9‬يط ج‪ً9‬دا ع‪9‬بر‬
‫االس‪9‬تخدام لإلط‪9‬ارات والرس‪9‬وم البرمجي‪9‬ة الُمحددة ال‪9‬تي تق‪9‬وم بتس‪9‬هيل التعام‪9‬ل معها والتعلم لها أيًض ا‪ ،‬ومن خالل ه‪9‬ذه اللغ‪9‬ة يمكن القي‪9‬ام بتع‪9‬ديل الموق‪9‬ع‬
‫بشكل سهل‪ ،‬في الَوقت الذي ُتعّد فيه هذه اللغة بأنها حلقة الوصل ما بين المستخدمين والمتصفح الخاص باإلنترنت ‪.‬‬
‫هو اختصار ل ‪ Hypertext Markup Language‬و تعني لغة ترميز النص التشعبي‬

‫لغة ‪ HTML5‬تتكون من الوسوم و االوامر التي يستخدمها مصممو الويب إلنشاء مواقع الويب‬
‫ليست لغة برمجة و انما هي لغة توصيفية‬

‫النص التش‪9‬عبي ه‪9‬و نص ب‪9‬ه رواب‪9‬ط يمكن للق‪9‬راء النق‪9‬ر عليها لالنتق‪9‬ال إلى ص‪9‬فحة أخ‪9‬رى أو ج‪9‬زء آخ‪9‬ر من الص‪9‬فحة‪ .‬وفي ال‪9‬وقت نفس‪9‬ه ‪ ،‬تس‪9‬تخدم لغ‪9‬ة الترم‪9‬يز‬
‫عالمات (وسوم) أو نًص ا عادًيا بعالمات خاصة لتحديد أقسام الصفحة ‪ ،‬مثل الرؤوس والتذييالت والعناصر األخرى ‪ ،‬بما في ذلك الجداول والصور‪.‬‬

‫توفر لغة ‪ HTML5‬الهيكل أو الطريقة التي سيظهر بها النص و الصور و ما إلى ذلك على موقع الويب‬

‫‪++ Notepad‬‬ ‫‪ Visual studio code‬او‬ ‫لكتابة ‪ HTML5‬ستحتاج إلى محرر نصوص مثل‬

‫في هذا التدريب سوف نستخدم ‪ visual studio code‬لكتابة الكودات‬

‫‪2 Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫األهداف‬

‫‪ .1‬تستخدم ‪ HTML5‬في بناء صفحات الويب‬

‫‪ .2‬تختار الوسم ‪ element‬المناسب لصفحة الويب و معرفة االختالفات بينها‬

‫‪ .3‬تبني صفحة ويب باستخدام ال ‪ layout‬المناسب‬

‫‪3 Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫إنشاء أول ملف‬
HTML5 ‫في‬

4 Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫لنبدأ كتابة أول كود علينا أوال إنشاء مجلد‬
‫ليحتوي الملفات التي سنكتبها‬

‫نقوم باختيار المكان الذي سيحتوي المجلد و‬

‫ننقر على زر الفأرة األيمن‬

‫‪5 Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 New ‫نختار خيار‬

6 Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫خيار‬ ‫نختار‬
Folder

7 Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫نقوم بتغيير اسم المجلد ألي‬
‫اسم تختاره‬

8 Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫اختيار اسم‬
‫المجلد‬

9 Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫ننقر على الصندوق أعاله و يجب أن ننتبه أن ال يكون‬
‫هناك أي فراغات أو رموز خاصة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
10 Full Stack Training (v 2022)
 ‫ و‬cmd ‫نقوم بمسح كل ما هو مكتوب و كتابة‬
enter ‫ضغط‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
11 Full Stack Training (v 2022)
 ‫ ثم‬. code ‫ستظهر هذه الشاشة ثم نقوم بكتابة‬
enter ‫نضغط‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
12 Full Stack Training (v 2022)
 Visual‫ية لبرنامج‬9‫ة الرئيس‬9‫ة و هي الشاش‬9‫ذه الشاش‬9‫ستظهر ه‬
studio code

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
13 Full Stack Training (v 2022)
 ‫إلنشاء ملف جديد ننقر على زر‬
‫ملف جديد‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
14 Full Stack Training (v 2022)
 html. ‫نقوم بإضافة اسم الملف الذي تريده واضافة‬
‫بعد اسم الملف لتأكيد أن الملف مكتوب بلغة‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
15 Full Stack Training (v 2022)
 ‫أو يمكنك إنشاء ملف جديد عن طريق فتح‬
File ‫الئحة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
16 Full Stack Training (v 2022)
 New File ‫اختيار‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
17 Full Stack Training (v 2022)
 ‫مع‬ ‫الملف‬ ‫اختيار اسم‬
html. ‫اضافة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
18 Full Stack Training (v 2022)
 ‫ ستظهر هذه الشاشة‬enter ‫بعد ضغط‬
‫لتحديد المكان الذي ستقوم بحفظ الملف فيه‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
19 Full Stack Training (v 2022)
 ‫ و سيتم إنشاء‬Create File ‫نقوم بالنقر على‬
‫الملف‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
20 Full Stack Training (v 2022)
 ‫هكذا سيبدو شكل الملف في البداية و هنا‬
‫ستتم كتابة الكودات‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
21 Full Stack Training (v 2022)
 ‫كتابة أول كود في‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
22 Full Stack Training (v 2022)
 ‫هذه هي الصورة التي سيبدو فيها أي ملف مكتوب‬
‫ و يحتوي على األجزاء األساسية في‬HTML5 ‫بلغة‬
HTML5 ‫أي ملف‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
23 Full Stack Training (v 2022)
 ‫العناصر األساسية‬
HTML5 ‫في‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
24 Full Stack Training (v 2022)
 ‫تتكون ملفات ‪ HTML5‬من وسوم أو عالمات و هي‬
‫عبارة عن رموز تعبر عن طريقة عرض النص الذي‬
‫بداخلها و هي المكون األساسي ألي ملف ‪ HTML5‬و‬
‫تكون مكتوبة على هذا الشكل <اسم الوسم>‬

‫كل وسم في لغة ال ‪ HTML5‬يتكون من وسم الفتح و‬

‫وسم اإلغالق‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪25‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫المكونات األساسية لمستند ‪ HTML5‬هي العالمات‬
‫( ‪ ) tags‬و العناصر (‪ ) elements‬تخبر المتصفح‬
‫بكيفية عرض المحتوى الخاص بك‬

‫تبدأ العالمات و تنتهي بأقواس بزاوية أو بعالمتي‬

‫"أصغر من " و " أكبر من " تسمى الحروف بينهما‬
‫محتويات العنصر‬

‫األمثل‪999‬ة على الوس‪999‬وم حيث ل‪999‬دينا ال ‪body‬‬

‫أح‪999‬د االمثل‪999‬ة‬
‫‪element‬‬
‫و ال < > ‪tags‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪26‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫الموجودة في كل ملف‬ elements ‫أهم العناصر‬
HTML5

‫اعالن نوع الوثيقة‬

Document type declaration )DTD(
‫> في بداية أو أعلى‬DOCTYPE HTML5!< ‫يظهر رمز‬
‫التي‬HTML5 ‫ يخبر المتصفح بنسخة‬HTML5 ‫مستند‬
‫تم استخدامها إلنتاج الصفحة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
27 Full Stack Training (v 2022)
 ‫أهم العناصر ‪ elements‬الموجودة في كل ملف‬
‫‪HTML5‬‬

‫عنصر جذر ‪HTML5 root element‬‬

‫يعمل <‪ >HTML5‬مثل العنصر الحاوي األساسي‬
‫الذي يحتوي على جميع العناصر األخرى يمكنه تحديد‬
‫لغة مستند ‪HTML5‬‬
‫على سبيل المثال <‪>”HTML5 lang=“ar-AR‬‬
‫يعني أن الصفحة مكتوبة باللغة العربية‪.‬‬
‫أو كما في المثال الذي لدينا‬
‫<‪>”HTML5 lang=“en‬‬
‫يعني أن الصفحة مكتوبة باللغة االنجليزية‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪28‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫الموجودة في كل‬ ‫أهم العناصر ‪elements‬‬
‫ملف ‪HTML5‬‬

‫عنصر الرأس ‪head‬‬

‫يحتوي <‪ >head‬الذي ستجده بين <‪>HTML5‬و‬
‫<‪>body‬على بيانات وصفية تصف معلومات الصفحة‬
‫تشمل <‪ >meta‬و يحتوي على الكلمات األساسية و‬
‫المؤلف ووصف الصفحة‬
‫<‪ >title‬يحتوي العنوان الرئيسي لصفحة الويب‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪29‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫الموجودة في كل‬ ‫أهم العناصر ‪elements‬‬
‫ملف ‪HTML5‬‬

‫عنصر الجسم ‪body‬‬

‫يحتوي <‪ >body‬على البيانات التي ستظهر على‬
‫شاشة المتصفح‬
‫جميع العناصر التي سنتكلم عنها الحقا ستكون داخل ال‬
‫<‪ >body‬و يمكن أن تكون نصوص أو صور‬
‫او جداول أو نماذج‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪30‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫حفظ ملف‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
31 Full Stack Training (v 2022)
 ‫بعد االنتهاء من كتابة الكود يجب حفظ الملف‬
Ctrl + S ‫و ذلك عن طريق ضغط زر‬
File ‫أو من خالل الئحة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
32 Full Stack Training (v 2022)
 ‫اختيار‬
save

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
33 Full Stack Training (v 2022)
 ‫ستالحظ اختفاء الدائرة البيضاء بجانب اسم الملف و يعني أنه تم‬
‫حفظ كل التغييرات‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
34 Full Stack Training (v 2022)
 ‫لتتمكن من رؤية الناتج النهائي نذهب إلى المجلد الذي قمت‬
‫بتخزين الملف فيه‬
‫سوف نجد الملف ‪ index.HTML5‬الذي يحتوي على الكود‬
‫الذي كتبناه‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪35‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ننقر مرتين على الملف باستخدام زر‬
‫الفأرة االيسر‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
36 Full Stack Training (v 2022)
 ‫هذا هو الناتج على المتصفح ستالحظ أن عنوان‬
‫صفحة الويب هو نفس العنوان الذي وضعناه في‬
‫العنصر‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫ في‬tags ‫أنواع ال‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
38 Full Stack Training (v 2022)
 ‫قبل البدء بالتحدث عن أنواع العناصر التي سنستخدمها يجب‬
‫أن نعرف أن هناك أشكال مختلفة للعناصر فكما قلنا في‬
‫البداية أن كل عنصر لديه وسم فتح و وسم إغالق و لكن‬
‫ليست كل العناصر لديها عنصر فتح أو إغالق معا‬

‫يوجد عناصر لديها وسم فتح و إغالق مًعا هذه العناصر تحتوي‬
‫دائما على محتوى بين وسميها و يمكن أن تتضمن عناصر‬
‫أخرى داخلها مثل عنصر ‪ body‬الذي يحتوي عناصر متعددة‬
‫بين وسميه‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪39‬‬ ‫)‪Full Stack Training (v 2022‬‬
 Empty
tags

‫)تكون‬Starting tag( ‫يوجد عناصر لديها وسم فتح فقط‬

‫كافة صفات هذا العنصر داخل هذا الوسم مثل العنصر‬
>meta< ‫ حيث أن لديه وسم واحد فقط و هو‬meta

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
40 Full Stack Training (v 2022)
 closing( ‫ط‬99‫م اغالق فق‬99‫ديها وس‬99‫ر ل‬99‫د عناص‬99‫يوج‬
‫)في نهايته‬/(slash ‫)و ما يميز هذا الوسم وجود‬tag
>/br< ‫مثل العنصر‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
41 Full Stack Training (v 2022)
 ‫هذا ه‪99‬و الن‪99‬اتج على المتص‪99‬فح و نالح‪99‬ظ االختالف بين‬
‫جمل‪9‬ة ‪ hello world‬و جمل‪9‬ة ‪:my name is‬‬
‫هذا ه‪9‬و الن‪9‬اتج على المتص‪9‬فح س‪9‬تالحظ أن عن‪9‬وان‬
‫الص‪9‬فحة ال‪9‬ويب ه‪9‬و نفس العن‪9‬وان ال‪9‬ذي وض‪9‬عناه‬
‫الختالف نوع العنص‪9‬ر أي أن ك‪9‬ل عنص‪9‬ر يحدد‬ ‫فيذل‪9‬ك‬
‫العنصر‬ ‫و‬
‫كيف سيظهر محتواه على المتصفح‬

‫نالح‪99‬ظ وج‪99‬ود المس‪99‬افة بين الجمل‪99‬تين و ذل‪99‬ك بس‪99‬بب‬

‫العنص‪9‬ر <‪>/br‬ال‪9‬ذي يق‪9‬وم بإض‪9‬افة س‪9‬طر جدي‪9‬د بين‬
‫العناصر التي قبله و بعده‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫العناوين الرئيسية‬
HTML5 ‫في‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
43 Full Stack Training (v 2022)
 ‫عند إنشاء أي صفحة ويب يجب أن يكون لدينا نص لعرضه‬
‫يوجد العديد من العناصر لعرض النصوص باختالفها‬
‫وأحد أهم هذه العناصر هي ال ‪ headings‬أو العناوين‬
‫الرئيسية‬

‫هناك ‪ 6‬أنواع مختلفة للعناوين الرئيسة تبدأ من ‪ h1‬و يكون‬

‫النص الخاص بها أكبر حجما نزوال إلى ‪ h6‬الذي يكون النص‬
‫فيه أقل حجما‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪44‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫نالحظ أن الكلمات يقل حجمها كلما زاد الرقم في‬
‫العنصر و أن الكلمات التي تكتب داخل هذه العناصر‬
‫تظهر بخط غامق و حجم أكبر و تستخدم عادة‬
‫باقيأن عن‪9‬وان‬
‫النصوص‬ ‫س‪9‬تالحظ‬ ‫المتص‪9‬فح‬
‫لتمييزها عن‬ ‫الن‪9‬اتج على‬
‫الرئيسة‬ ‫هذا ه‪9‬و‬
‫للعناوين‬
‫الص‪9‬فحة ال‪9‬ويب ه‪9‬و نفس العن‪9‬وان ال‪9‬ذي وض‪9‬عناه‬
‫في العنصر‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫الفقرات في‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
46 Full Stack Training (v 2022)
 ‫العنصر االخر الذي يستخدم لعرض النصوص هو‬
‫العنصر <‪ >p‬و هو اختصار ل ‪ paragraph‬و يعني‬
‫فقرة‬
‫يستخدم هذا العنصر لعرض الفقرات و يكون النص‬
‫بالحجم المناسب وال يكون غامقا‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪47‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫هذا ه‪9‬و الن‪9‬اتج على المتص‪9‬فح س‪9‬تالحظ أن عن‪9‬وان‬
‫العنصرين ‪ h1‬و‬ ‫باستخدام‬
‫وض‪9‬عناه‬ ‫نفس النص‬
‫العن‪9‬وان ال‪9‬ذي‬ ‫بكتابةنفس‬ ‫الص‪9‬فحة قمنا‬
‫ال‪9‬ويب ه‪9‬و‬
‫في العنصر‪p‬و يمكنك مالحظة أن النص المكتوب داخل عنصر‬
‫‪ p‬يظهر بخط أصغر وأنه ال يكون غامقا‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫يمكننا إضافة بعض التأثيرات على الفقرات‬
‫التي نكتبها‬

‫هذه هي الفقرة االصلية بدون‬

‫تأثيرات‬
‫‪1‬‬
‫لتغميق الخط نستخدم <‪ b> bold‬أو <‪>strong‬‬ ‫‪.1‬‬
‫‪2‬‬ ‫لتصغير الخط نستخدم <‪>small‬‬ ‫‪.2‬‬
‫‪3‬‬ ‫لتظليل جزء من النص نستخدم <‪>mark‬‬ ‫‪.3‬‬

‫‪4‬‬ ‫لكتابة النص بخط مائل نستخدم <‪i> italic‬‬ ‫‪.4‬‬

‫لوضع جزء من النص فوق الباقي أو تحته نستخدم <‪>sub‬‬ ‫‪.5‬‬
‫‪5‬‬
‫أو <‪>sup‬‬
‫‪6‬‬ ‫لحذف جزء من النص نستخدم <‪>del‬‬ ‫‪.6‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪49‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫هذه هي الفقرة األصلية بدون‬
‫تأثيرات‬

‫على النهائي‬
‫المتص‪9‬فح س‪9‬تالحظ أن عن‪9‬وان‬ ‫الشكل‬
‫هوالن‪9‬اتج‬ ‫هذا‬
‫هذا ه‪9‬و‬
‫العناصر‬
‫العن‪9‬وان ال‪9‬ذي وض‪9‬عناه‬ ‫باستخدام‬
‫ه‪9‬و نفس‬ ‫للفقرات‬
‫الص‪9‬فحة ال‪9‬ويب‬
‫العنصرشرحها‬
‫التي تقدم‬
‫في‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫شريط التنقل‬
‫) في‬navigation bar(
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
51 Full Stack Training (v 2022)
 ‫في أي صفحة ويب سوف تالحظ وجود شريط في‬
‫أعلى الصفحة يحتوي على أجزاء الموقع و عند النقر‬
‫على هذه األجزاء سوف تأخذك إلى صفحة أخرى أو‬
‫إلى قسم محدد من نفس الصفحة‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪52‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫يسمى هذا الشريط شريط التنقل (‪ )Navigation bar‬و يتكون ال‬
‫‪ Navigation bar‬من عدة روابط لتنقلنا إلى الصفحات المختلفة‬

‫إلنشاء ‪ Navigation bar‬نستخدم العنصر <‪ >nav‬و الذي يعتبر‬

‫العنصر الحاوي لل ‪ Navigation bar‬و نستخدم العنصر <‪>a‬‬
‫إلضافة الروابط التي نريدها‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪53‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ شبيه بالذي رأيناه نبدأ بوضع‬navigation bar ‫إلنشاء‬
‫> و يجب أن تكون جميع الروابط بين‬nav< ‫العنصر‬
‫وسمي الفتح و اإلغالق‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
54 Full Stack Training (v 2022)
 ‫نالحظ أن العنصر <‪ >a‬لديه اضافة لم تكن موجودة في‬
‫العناصر السابقة التي ذكرناها و هي ‪ href‬تعتبر من‬
‫السمات للعنصر <‪>a‬‬
‫يملك كل عنصر سمات خاصة به و يجب أن تكون هناك‬
‫قيمة للسمة ففي العنصر <‪ >a‬تكون قيمة ال ‪ href‬هي‬
‫الرابط أو ال ‪ URL‬الخاص بالصفحة التي تريد االنتقال‬
‫اليها عند النقر على الكلمة‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪55‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫لكتابة العناصر التي تتضمن سمات إضافية يجب وضع هذه السمات‬
‫في وسم الفتح فقط‬
attribute ‫مة) أو‬9‫م الس‬9‫مة = اس‬9‫ة الس‬9‫كل (قيم‬9‫ون على ش‬9‫يجب أن تك‬
name = attribute value

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
56 Full Stack Training (v 2022)
 ‫القيمة التي تم إضافتها إلى السمة ‪ href‬هي الرابط الخاص‬
‫بالصفحة المراد االنتقال اليها عند النقر على الكلمة المحاطة‬
‫بوسمي الفتح واإلغالق الخاص بالعنصر <‪ >a‬و يجب أن يكون‬
‫الرابط داخل عالمات التنصيص " "‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪57‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫للحصول على الرابط أو ال ‪ URL‬نذهب إلى الصفحة التي‬
‫نريد االنتقال اليها نقوم بنسخ الرابط الموجود في الصندوق‬
‫المشار اليه ثم ننسخه في الكود‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪58‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫نالحظ أن الكلمات يقل حجمها كلما زاد الرقم في‬
‫العنصر و أن الكلمات التي تكتب داخل هذه‬
‫وجود الكلمات التي‬ ‫سوف ونالحظ‬
‫تستخدم‬ ‫كتبناه‬
‫حجم أكبر‬ ‫الكود الذي‬
‫غامق و‬ ‫تشغيل بخط‬ ‫عند‬
‫العناصر تظهر‬
‫عن‪9‬وان‬
‫النقر على أي منها‬ ‫أنو عند‬
‫باقي‬ ‫عن‬ ‫س‪9‬تالحظ‬
‫خط‬ ‫المتص‪9‬فحو تحتها‬
‫لتمييزها‬ ‫أزرق‬ ‫على‬
‫بلون‬
‫الرئيسة‬ ‫الن‪9‬اتج‬
‫سابقا‬ ‫ه‪9‬و‬
‫كتبناها‬
‫للعناوين‬ ‫هذا‬
‫عادة‬
‫وض‪9‬عناه‬
‫الرابط‬ ‫ال‪9‬ذي‬
‫بذلك‬ ‫العن‪9‬وان‬
‫الخاصة‬ ‫إلى نفس‬
‫الصفحة‬ ‫تنقلك ه‪9‬و‬
‫سوفال‪9‬ويب‬
‫الص‪9‬فحة‬
‫النصوص‬
‫في العنصر‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫عند النقر على أهدافنا مثال سوف تنتقل تلقائيا إلى الصفحة التي تحمل‬
‫الرابط الخاص بها‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
60 Full Stack Training (v 2022)
 ‫هذا ه‪9‬و الن‪9‬اتج على المتص‪9‬فح س‪9‬تالحظ أن عن‪9‬وان‬
‫عند النقر على‬ ‫ستظهر‬
‫وض‪9‬عناه‬ ‫التي‬
‫ال‪9‬ذي‬ ‫الصفحة‬
‫العن‪9‬وان‬ ‫هينفس‬
‫هذه ه‪9‬و‬
‫الص‪9‬فحة ال‪9‬ويب‬
‫في العنصر أهدافنا نالحظ أن ال ‪ URL‬الخاص بالصفحة هو‬
‫نفس ال ‪ URL‬الموجود في الكود‬

‫مالحظة عند تطبيق هذا الجزء لن يعمل لديك ألن‬

‫هذا الموقع سوف تتعلم تطبيقه الحقا‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 inline tags ‫الفرق بين‬
‫ في‬block tags ‫و‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
62 Full Stack Training (v 2022)
 ‫عندما ننظر إلى الشكل الذي ظهرت به الروابط نالحظ‬ ‫بينما إذا قمنا بمقارنتها بالعناوين الرئيسية التي‬
‫أن جميع الكلمات ظهرت على نفس السطر‬ ‫على سطر‬
‫عن‪9‬وان‬ ‫كل عنوان‬
‫س‪9‬تالحظ أن‬ ‫سابًقا كان‬
‫المتص‪9‬فح‬ ‫كتبناهاعلى‬
‫هذا ه‪9‬و الن‪9‬اتج‬
‫الص‪9‬فحة ال‪9‬ويب ه‪9‬و نفس العن‪9‬وان ال‪9‬ذي وض‪9‬عناه‬
‫في العنصر‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫هذا ه‪9‬و الن‪9‬اتج على المتص‪9‬فح س‪9‬تالحظ أن عن‪9‬وان‬
‫الص‪9‬فحة ال‪9‬ويب ه‪9‬و نفس العن‪9‬وان ال‪9‬ذي وض‪9‬عناه‬
‫في العنصر‬

‫نالحظ هنا أن كال العنصرين كتبا بنفس االسلوب و لكن‬

‫ما سبب اختالف طريقة عرضهما؟؟‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ال ‪block tags‬‬
‫تبدأ دائما بسطر جديد و تترك مسافة سطر فوقها و تحتها و تكون‬
‫على سطر وحدها ألنها تأخذ عرض الصفحة كامال فال تترك مجاال‬
‫ألي عنصر اخر بجانبها‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪65‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ال ‪inline tags‬‬
‫تبدأ من حيث ينتهي العنصر الذي قبلها و ال تبدأ بسطر جديد إال إذا‬
‫سبقها ‪ block tag‬و تأخذ العرض المساوي لعرض المحتوى الخاص بها‬
‫فقط و بما أن جميع المحتويات في السطر األول من النوع ‪inline tag‬‬
‫فسوف تكون جميعها على نفس السطر‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪66‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫من أشهر العناصر التي تندرج تحت ال ‪ block tags‬هو العنصر<‪>div‬‬
‫يستخدم العنصر <‪ >div‬لجمع أجزاء من الكود معا و تكون هذه األجزاء‬
‫لديها ما يربطها معا و يمكن أن يستخدم أيضا لفصل جزء من الكود عن‬
‫الباقي ووضعه في مكان منفصل‬

‫من أشهر العناصر التي تندرج تحت ال ‪ inline tags‬هو العنصر‬

‫<‪ >span‬يستخدم العنصر <‪ >span‬لتحديد جزء مختلف من نص و‬
‫يعتبر من ال ‪ inline tags‬ألنه يغير الجزء المحدد دون تغيير موقعه أي‬
‫أنه يكون في نفس السطر الموجود فيه النص‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪67‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫نالحظ أن الفقرة التي تحتوي العنصر <‪ >div‬داخلها قام بجعل‬
‫الجملة المحتواة داخله تبدأ يسطر جديد و باقي الجملة كان‬
‫على سطر اخر‬

‫بينما الفقرة التي تحتوي العنصر <‪ >span‬لم تجعل الجملة‬

‫المحتواة داخلها تبدأ على سطر جديد و إنما بقيت على نفس‬
‫السطر لباقي الجملة‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪68‬‬ ‫)‪Full Stack Training (v 2022‬‬
 block tags ‫ و‬inline tags ‫أمثلة على ال‬
block tags ‫أمثلة أخرى على عناصر من نوع‬

>h1> - <h6<

>header<

>footer<

>table<

inline tags ‫أمثلة أخرى على عناصر من نوع‬

>a<

>b<

>input<

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
69 Full Stack Training (v 2022)
 HTML5 ‫الصور في‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
70 Full Stack Training (v 2022)
 ‫ال تحتوي صفحات الويب على نصوص فقط بل و تحتوي على صور و فيديوهات‬
‫إلعطاء الموقع جمالية‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
71 Full Stack Training (v 2022)
 ‫يستخدم العنصر <‪ >img‬إلضافة الصور إلى صفحة‬
‫الويب‬
‫يمتلك العنصر <‪ >img‬بعض السمات و أهمها السمة‬
‫‪ src‬التي تحدد الصورة التي سوف يتم عرضها‪ .‬تحدد‬
‫السمة ‪ alt‬النص البديل الذي سيظهر إذا حدثت أي‬
‫مشكلة عند عرض الصورة‬

‫نالحظ أن العنصر <‪ > img‬ال يمتلك‬

‫وسم إغالق‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪72‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫نالحظ أن قيمة السمة ‪ src‬هي الموقع التي توجد فيه‬
‫الصورة‬
‫و نالحظ أيضا أننا قمنا بإنشاء ملف ‪ assets‬لتخزين‬
‫الصور فيه و للوصول إلى الصورة الموجودة داخل المجلد‬
‫األساسي الذي يوجد فيه ملف ال ‪ HTML5‬نقوم بوضع‬
‫اسم المجلد الخاص بالصور ثم ( ‪ ) /‬ثم اسم الصورة التي‬
‫نريد إظهارها‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪73‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ستظهر الصور بهذه الطريقة نالحظ أن الصور لديها أبعاد مختلفة و لكن يمكننا إعطاء‬
‫جميع الصور نفس القياسات‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪74‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ اللتان تحددان طول‬width ‫ و‬height ‫يمكننا تحقيق ذلك باستخدام الخاصيتين‬
‫و عرض الصورة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
75 Full Stack Training (v 2022)
 ‫ستظهر الصور بهذه الطريقة نالحظ أن الصور لديها‬
‫نفس الحجم‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
76 Full Stack Training (v 2022)
 ‫نالحظ هنا أننا قمنا بوضع أسماء صور غير موجودة في ملف‬
‫الصور الذي لدينا‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
77 Full Stack Training (v 2022)
 alt ‫نالحظ أن الصور لم تظهر و أن قيم النص البديل‬
‫هي التي ظهرت‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
78 Full Stack Training (v 2022)
 HTML5 ‫الفيديو في‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
79 Full Stack Training (v 2022)
 ‫يمكننا أيضا عرض فيديوهات على‬
‫صفحات الويب‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
80 Full Stack Training (v 2022)
 ‫نستخدم العنصر <‪ >video‬لعرض الفيديوهات و نالحظ أنه يملك نفس السمة ‪src‬‬
‫التي تحمل الموقع الذي يوجد فيه الفيديو‬
‫نستخدم ‪controls‬إلظهار أدوات التحكم في الفيديو مثل إعدادات الصوت و توسيع‬
‫الفيديو ليظهر بأكبر حجم ممكن و إعدادات أخرى تتعلق بالفيديو‬
‫نستخدم ‪ autoplay‬لجعل الفيديو يبدأ من تلقاء نفسه عند فتح صفحة الويب‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪81‬‬ ‫)‪Full Stack Training (v 2022‬‬
 HTML5 ‫القوائم في‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
82 Full Stack Training (v 2022)
 ‫يمكننا ايضا إضافة قائمة إلى صفحة الويب الخاصة بنا ونالحظ أن هناك‬
‫نوعين من القوائم‬
‫‪ -1‬قائمة غير مرتبة ‪Unordered list‬‬
‫‪ -2‬قائمة مرتبة ‪Ordered list‬‬

‫يكمن االختالف الوحيد بين هاتين القائمين في اختالف الرموز بجانب‬

‫النقاط‬
‫ففي ال ‪ Unordered list‬تكون جانبها دائرة أو أي شكل هندسي اخر‬
‫كالمربع‬
‫أما ال ‪ Ordered list‬تكون بجانبها أرقام أو حروف أبجدية أي أن األولى‬
‫تستخدم لتعديد نقاط دون ترتيب معين أما الثانية تستخدم عندما يكون‬
‫لدينا ترتيب يجب اتباعه‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪83‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫إلضافة قائمة إلى صفحة الويب نحدد أوًال نوع القائمة ‪ Unordered‬أو‬
‫‪Ordered‬‬
‫نحدد العنصر المستخدم اعتمادا على نوع القائمة لل‪ Unordered list‬نختار‬
‫العنصر <‪>ul‬‬
‫لل ‪ Ordered list‬نختار العنصر <‪>ol‬‬
‫نقوم بإضافة محتويات كل قائمة و نضع كل محتوى داخل عنصر <‪ >li‬واحد‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪84‬‬ ‫)‪Full Stack Training (v 2022‬‬
 HTML5 ‫الجداول في‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
85 Full Stack Training (v 2022)
 ‫إضافة جدول في صفحة‬
‫الويب‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
86 Full Stack Training (v 2022)
 ‫الجداول مكونة من صفوف و أعمدة و عند كتابة جدول في‬
‫‪ HTML5‬نبدأ باألعمدة أواًل ثم بالصفوف ثم نضيف البيانات‬
‫داخل خاليا الجدول‬

‫لعمل جدول نبدأ بالعنصر <‪ >table‬الذي يقوم ببناء الجدول و كل العناصر‬
‫الباقية تكون داخله‬
‫نبدأ بإضافة االعمدة أوًال باستخدام العنصر <‪>thead‬ثم نستخدم العنصر‬
‫<‪ >tr‬إلنشاء الصف الذي يحتوي اسماء االعمدة و نستخدم العنصر <‪>th‬‬
‫إلضافة أسماء األعمدة حسب عددها‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪87‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫هذا هو الصف الذي يحمل أسماء‬
‫األعمدة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
88 Full Stack Training (v 2022)
 ‫بعد االنتهاء من الجزء االول نقوم بإنشاء الصفوف التي تحمل بيانات الجدول‬
‫<‪>tr‬‬ ‫نستخدم العنصر <‪ >tbody‬الذي يبني الصفوف و نستخدم العنصر‬
‫إلضافة الصفوف‬
‫بعد إنشاء الصف نضيف محتوياته و يجب أن يكون عدد العنصر <‪ >td‬في كل‬
‫<‪ >tr‬هو نفسه عدد األعمدة فمثال لدينا عمودان فقمنا بإضافة ‪ 2‬من العنصر‬
‫<‪ >td‬في كل سطر‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪89‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫هذه هي الصفوف التي قمنا بإنشائها‬
‫نالحظ أنه ال يوجد إطار للجدول ألن‬
‫الوضع االفتراضي للجدول يكون‬
‫بدون خطوط أو اطار سنتعلم الحقا‬
‫كيف يمكننا إضافة اطار و خطوط‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪90‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ في‬Entities ‫ال‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
91 Full Stack Training (v 2022)
 ‫تس‪999‬تخدم ال ‪ Entities‬أو الرم‪999‬وز الخاص‪999‬ة في‬
‫‪ HTML5‬إلض‪9‬افة رم‪9‬وز إلى ص‪9‬فحة ال‪9‬ويب ال‪9‬تي من‬
‫الممكن أن التتوفر على لوحة المفاتيح الخاصة بنا‬

‫لكتابة أي ‪ entity‬يجب أن تبدأ برمز ‪ )&( and‬و‬

‫نكتب ال ‪ entity‬التي نريدها ثم ننهيها بفاصلة‬
‫منقوطة (;)‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫إذا الحظت خالل كتابة األكواد السابقة أنه عند‬
‫إضافة أكثر من مسافة واحدة بين الكلمات‬
‫بتجاهل هذه‬ ‫فسوف يقوم ال ‪browser‬‬
‫المسافات و إبقاء مسافة واحدة فقط‬
‫إذا أردت إبقاء أكثر من مسافة بين الكلمات‬
‫يمكن‪9‬ك اس‪9‬تخدام ‪ entity‬تس‪9‬مى ‪nonbreaking‬‬
‫‪ space‬و التي تعني أن المتصفح لن يقوم‬
‫بتجاهلها و تكتب هكذا &‪;nbsp‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫الحظ أنه في المثال األول تم تجاهل‬
‫المسافات بين الكلمات‬
‫و لكن في المثال الثاني تم إضافة مسافتين‬
‫بين الكلمات‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫يمكننا إضافة الكثير من الرموز مثل الرموز الرياضية أو عالمات‬
‫التنصيص بنوعيها أو عالمات العمالت النقدية و العالمات الخاصة‬
‫بحقوق الملكية و العالمات التجارية المسجلة‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 HTML5 ‫النماذج في‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
96 Full Stack Training (v 2022)
 ‫ هي النماذج التي نستخدمها ألخد البيانات من‬HTML5 ‫أحد أهم العناصر في‬
‫مستخدمي صفحات الويب‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
97 Full Stack Training (v 2022)
 ‫إلنشاء نموذج في ‪ HTML5‬نحتاج العنصر <‪ >form‬الذي يقوم بإنشاء‬
‫النموذج تقع أجزاء النموذج داخل هذا العنصر‬
‫نقوم في البداية بإنشاء ‪ label‬و هو النص الذي سيساعد المستخدم‬
‫على معرفة ماذا يجب أن يكتب داخل الصندوق مثال ‪ first name‬تخبر‬
‫المستخدم أن عليه كتابة اسمه االول‬
‫إلنشاء ال ‪ label‬نستخدم العنصر <‪ >label‬و لديه سمة مهمة و هي ‪for‬‬
‫و تكون قيمتها اسم يدل على المحتوى الخاص فيها ففي هذا المثال‬
‫وضعنا القيمة ‪fname‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪98‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ الذي‬label ‫هذا هو ال‬
‫أضفناه‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
99 Full Stack Training (v 2022)
 ‫نقوم بإضافة الصندوق الذي سيضيف إليه المستخدم المدخالت‬
‫نستخدم العنصر <‪ >input‬ليستقبل المدخالت و هناك أنواع‬
‫مختلفة للعنصر <‪ >input‬اعتمادا على نوع المدخالت إذا كان‬
‫المدخل نص نحدد قيمة السمة ‪ type‬تساوي ‪ text‬و تكون قيمة‬
‫ال ‪ id‬مساوية لقيمة السمة ‪ for‬في ال ‪label‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪100‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ الذي‬input ‫هذا هو ال‬
‫أضفناه‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
101 Full Stack Training (v 2022)
 ‫النوع الثاني من ال ‪ input‬هو ‪submit‬‬
‫و يقوم بإنشاء زر إلرسال محتويات النموذج إلى قاعدة البيانات‬
‫‪ database‬تكون قيمة السمة ‪ type‬تساوي ‪ submit‬و يمكننا إضافة‬
‫السمة ‪ value‬التي ستعرض نصا على الزر لتخبر المستخدم ماذا‬
‫سيحدث عند النقر عليه مثال ‪submit‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪102‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫هذا هو الزر الذي‬
‫أضفناه‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
103 Full Stack Training (v 2022)
 password ‫ وهو ال‬input ‫نوع اخر من ال‬
‫ بأنه عند الكتابة داخله ال‬input ‫يتميز هذا النوع من‬
‫تظهر كلمة السر بل تظهر نقاط سوداء إلخفاء كلمة‬
‫السر‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
104 Full Stack Training (v 2022)
 ‫كلمة السر ال تظهر عند‬
‫الكتابة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
105 Full Stack Training (v 2022)
 ‫نوع اخر من ال ‪ input‬وهو ال ‪radio‬‬
‫يتميز هذا النوع من ‪ input‬بأنه ال يمكنك اختيار أكتر من‬
‫اختيار واحد و نالحظ وجود سمة جديدة و هي ال ‪name‬‬
‫و تكون قيمتها متشابهة في كل الخيارات وذلك يحدد أنه‬
‫يمكن اختيار اختيار واحد فقط‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪106‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫إذا حاولت اختيار أكثر من خيار فلن‬
‫يسمح لك بذلك‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
107 Full Stack Training (v 2022)
 ‫نوع اخر من ال ‪ input‬وهو ال ‪checkbox‬‬
‫يشبه ال ‪ radio‬و لكن االختالف أنه يمكنك اختيار أكثر من‬
‫خيار معا و إذا أردت التراجع عن اختيار معين انقر المربع مرة‬
‫أخرى‬
‫وال حظ أن قيم السمة ‪ name‬ليست متشابهة وذلك يعني أنه‬
‫يمكنك اختيار اكثر من خيار معا‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪108‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫يمكنك اختيار أكثر من‬
‫خيار‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
109 Full Stack Training (v 2022)
 file ‫ وهو ال‬input ‫نوع اخر من ال‬
‫يستخدم إلضافة جميع أنواع الملفات مثل الصور و الفيديوهات و‬
‫الملفات األخرى‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
110 Full Stack Training (v 2022)
 ‫سيظهر لك زر الختيار‬
‫الملف‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
111 Full Stack Training (v 2022)
 ‫عند النقر عليه ستفتح نافذة لتختار الملف الذي تريد إدخاله بعد أن تختار‬
open ‫الملف انقر‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
112 Full Stack Training (v 2022)
 ‫سيظهر اسم الملف الذي قمت‬
‫باختياره‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
113 Full Stack Training (v 2022)
 ‫يمكننا إضافة الئحة تحتوي على‬
‫خيارات‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
114 Full Stack Training (v 2022)
 ‫ ثم‬label ‫ نضيف‬dropdown list ‫إلضافة الالئحة أو ما يسمى‬
‫ ونضيف‬dropdown list ‫> إلنشاء ال‬select< ‫نستخدم العنصر‬
id ‫ال‬
dropdown list ‫ إلضافة الخيارات لل‬option ‫نستخدم العنصر‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
115 Full Stack Training (v 2022)
 ‫ في‬viewport ‫ال‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
116 Full Stack Training (v 2022)
 ‫‪1‬‬
‫كما نعلم يمكننا فتح صفحات الويب على أجهزة الحاسوب أو الهواتف‬
‫أو أي جهاز لديه متصفح لذلك تختلف الطريقة التي تعرض فيها‬
‫العناصر باختالف الجهاز المستخدم‬

‫‪2‬‬
‫لذلك علينا استخدام العنصر ‪ meta‬لتحديد كيف ستعرض الصفحة‬
‫على مختلف األجهزة‬

‫‪3‬‬
‫نستخدم ال ‪ viewport‬لهذا الغرض حيث نحدد العرض الخاص بالصفحة ليتناسب‬
‫مع عرض الجهاز‬
‫‪"content="width=device-width, initial-scale=1.0‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪117‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫لكي تتمكن من تحديد كيف سيكون شكل الصفحة على مختلف األجهزة يمكننا رؤية كيف ستظهر الصفحة‬
‫عن طريق نقر زر الفأرة االيمن‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪118‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫نختار‬ ‫ثم‬
inspect

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
119 Full Stack Training (v 2022)
 ‫سوف تظهر هذه الصفحة ثم نختار‬
‫هذا األمر‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
120 Full Stack Training (v 2022)
 ‫سوف تظهر هذه الصفحة و يمكننا رؤية‬
‫كيف ستظهر الصفحة باختالف أنواع‬
‫األجهزة عند اختيار هذا الخيار‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪121‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫يمكنك اختيار نوع الجهاز الذي تريد رؤية‬
‫المحتوى عليه‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
122 Full Stack Training (v 2022)
 ‫يمكنك اختيار نوع الجهاز الذي تريد رؤية‬
‫المحتوى عليه‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
123 Full Stack Training (v 2022)
 ‫بعد اختيار نوع الجهاز‬
‫سوف ترى كيف يظهر‬
‫المحتوى عليه‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
124 Full Stack Training (v 2022)
 ‫لكي نالحظ أهمية هذا العنصر سوف نرى االختالف عند استخدامه و‬
‫عند عدم استخدامه‬

‫هذا هو النص الذي نريد عرضه و هنا استخدمنا العنصر‬

‫‪meta‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪125‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫هكذا سوف يظهر النص عند فتح صفحة الويب على جهاز الحاسوب و نالحظ أن النص‬
‫يمتد إلى نهاية الصفحة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
126 Full Stack Training (v 2022)
 ‫لكي نالحظ أهمية هذا العنصر سوف نرى االختالف عند استخدامه و‬
‫عند عدم استخدامه‬

‫هذا هو النص الذي نريد عرضه و هنا استخدمنا العنصر‬

‫‪meta‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪127‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫هكذا سوف يظهر النص و‬
‫نالحظ أن عرض النص مالئم‬
‫لعرض الجهاز‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
128 Full Stack Training (v 2022)
 ‫هذا هو النص الذي نريد عرضه و هنا لم نستخدم‬
meta ‫العنصر‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
129 Full Stack Training (v 2022)
 ‫هكذا سوف يظهر النص و نالحظ أن‬
‫عرض النص ال يتناسب مع عرض‬
‫الجهاز الذي اخترناه‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
130 Full Stack Training (v 2022)
 ‫‪HTML5 Layout‬‬
‫قمن‪9‬ا بالحديث عن المكونات الرئيس‪9‬ة ألي مل‪9‬ف ‪ HTML5‬و رأين‪9‬ا أن بعض العناص‪9‬ر توج‪9‬د داخ‪9‬ل عناص‪9‬ر أخ‪9‬رى و لكي يك‪9‬ون المل‪9‬ف مرتب‪9‬ا يجب أن يك‪9‬ون هن‪9‬اك‬
‫تخطيط لصفحة الويب لتظهر بشكل جيد للمستخدم لذاك تقسم الصفحة إلى عدة أقسام رئيسية‬

‫‪header -‬‬
‫يتضمن العنوان الرئيسي للموقع‬

‫‪nav -‬‬
‫يتضمن شريط التنقل للصفحات االخرى في الموقع‬

‫‪Section -‬‬
‫يتضمن أجزاء من المحتوى الخاص بالموقع‬

‫‪Article -‬‬
‫يتضمن أجزاء مستقلة من المحتوى الخاص بالموقع‬

‫‪aside-‬‬
‫يتضمن أجزاء منفصلة عن المحتوى الخاص بالموقع و ال تتأثر بها‬

‫‪footer-‬‬
‫يتضمن معلومات عن الصفحة مثل وسائل التواصل حقوق الملكية و غيرها‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ في‬import ‫ال‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
132 Full Stack Training (v 2022)
 ‫إلنشاء صفحة ويب تعمل بشكل جيد و ذات مظهر‬
‫جيد يجب أن نضيف بعض الملفات التي ستحتوي‬
‫أكواد اضافية‬
‫أنواع الملفات التي سنحتاجها غالبا إما ملفات ‪css‬‬
‫‪ JavaScript‬إلضافة ملف ‪css‬‬ ‫أو ملفات‬
‫نستخدم هذا السطر‬
‫قيمة ال ‪ href‬هي موقع الملف‬
‫قيمة ال ‪ rel‬هي نوع العالقة بين الملفين‬
‫قيمة ال ‪ type‬هي نوع الملف‬
‫هذا هو النص الذي نريد عرضه و هنا لم نستخدم‬
‫العنصر ‪meta‬‬
‫إلضافة ملف ‪ JavaScript‬نستخدم هذا السطر قيمة‬
‫ال ‪ src‬هي موقع الملف‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪133‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ في‬class ‫ و‬id ‫ال‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
134 Full Stack Training (v 2022)
 ‫تعلمنا كيف يمكننا اضافة ملفات إلى ملف ال ‪ HTML5‬فعند‬
‫إضافة ملف ‪ css‬سوف نتمكن من إجراء بعض التغييرات‬
‫على ال ‪ elements‬الموجودة و لكي نتمكن من اجراء‬
‫التغييرات على ‪ element‬واحد فقط نقوم بإعطاء هذا ال‬
‫‪ element‬شيء يميزه عن غيره وهو ال ‪ id‬يجب أن ال يتم‬
‫إعطاء نفس ال ‪ id‬ألكثر من ‪ element‬واحد ولكن إذا أردت‬
‫‪1‬‬ ‫إجراء نفس التغييرلت على أكثر من ‪ element‬يمكننا‬
‫‪2‬‬ ‫استخدام ال ‪ class‬ويمكن أن يكون لدى أكثر من ‪element‬‬
‫نفس ال ‪class‬‬
‫‪3‬‬
‫‪1‬‬
‫‪ Element‬لديه ‪ id‬قيمته ‪hello‬‬

‫‪2‬‬
‫‪ Element‬لديه ‪ class‬قيمته ‪main‬‬

‫‪3‬‬
‫‪ Element‬مختلف لديه ‪ class‬قيمته ‪main‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫الوظيفة‬ ‫اسم ال‪tag‬‬

‫يخبر المتصفح أن الملف مكتوب بلغة ‪HTML5‬‬ ‫<!‪>DOCTYPE‬‬

‫يحتوي على جميع وسوم لغة ‪HTML5‬‬ ‫<‪>HTML5‬‬

‫إضافة معلومات للصفحة وهذه المعلومات ال تظهر لزائر الصفحة‬ ‫<‪>meta‬‬

‫يحت‪9‬وي على معلوم‪9‬ات خاص‪9‬ة بالص‪9‬فحة ولكن ال تظهر بش‪9‬كل مباش‪9‬ر للُمس‪9‬تخدم‬ ‫<‪>head‬‬
‫العادي‬
‫يكون بداخله المحتوى الذي يظهر لزائر الصفحة‬ ‫<‪>body‬‬

‫الكتابة من سطر جديد‬ ‫<‪>/br‬‬

‫تحديد عناوين الصفحة‬ ‫<‪>h1‬‬

‫إنشاء فقرة‬ ‫<‪>p‬‬

‫عمل خط سميك للعنصر‬ ‫<‪>b‬‬

‫عمل خط سميك للعنصر‬ ‫<‪>strong‬‬

‫تصغير حجم الخط‬ ‫<‪>small‬‬

‫تظليل جزء من النص‬ ‫<‪>mark‬‬

‫المحتوى بداخل هذا الوسم يكون بخط مائل‬ ‫<‪>i‬‬

‫نص أعلى من النص االساسي‬ ‫<‪>sub‬‬

‫نص أسفل من النص االساسي‬ ‫<‪>sup‬‬

‫حذف المحتوى داخله‬ ‫<‪>del‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪136‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫الوظيفة‬ ‫اسم ال‪tag‬‬

‫إنشاء شريط يحتوي على روابط‬ ‫<‪>nav‬‬

‫عمل الروابط‬ ‫<‪>a‬‬

‫جمع عدة عناصر ذات صفات مشتركة‬ ‫<‪>div‬‬

‫إعطاء جزء من النص صفة مختلفة‬ ‫<‪>span‬‬

‫إدراج صورة في الموقع‬ ‫<‪>img‬‬

‫إدراج فيديو في الموقع‬ ‫<‪>video‬‬

‫إنشاء قائمة غير مرتبة‬ ‫<‪>ul‬‬

‫إنشاء قائمة مرقمة او مرتبة‬ ‫<‪>ol‬‬

‫إضافة عنصر إلى قائمة‬ ‫<‪>li‬‬

‫إنشاء جدول‬ ‫<‪>table‬‬

‫إنشاء الجزء العلوي من الجدول‬ ‫<‪>thead‬‬

‫إضافة صف جديد‬ ‫<‪>tr‬‬

‫اضافة عناوين األعمدة في الجدول‬ ‫<‪>th‬‬

‫إنشاء الجزء الرئيسي من الجدول‬ ‫<‪>tbody‬‬

‫إضافة بيانات داخل خاليا الجدول‬ ‫<‪>td‬‬

‫عمل نموذج لحقول اإلدخال‬ ‫<‪>form‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪137‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫الوظيفة‬ tag‫اسم ال‬

‫وضع شرح توضيحي لحقل اإلدخال‬ >label<

‫إنشاء حقل ادخال لبيانات الُمستخدم‬ >input<

drop-down list ‫إنشاء قائمة‬ >select<

drop-down list ‫إضافة خيارات إلى ال‬ >option<

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
138 Full Stack Training (v 2022)
 Full Stack Training
To Build One App for Any Device and Platform

HTML5 Example Tutorial

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
139 Full Stack Training (v 2022)
 ‫المقدمة‬

.‫في المثال سيتم إنشاء موقع الكترني متكامل يتضمن ما تعلمته في سايقًا‬
: ‫قبل البدء بالتطبيق ستحتاج إلى تزيل الملفات التالية‬

https://cbmiswebsite-public.s3.eu-central-1.amazonaws.com/images/htmlcss/about/about.jpg
https://cbmiswebsite-public.s3.eu-central-1.amazonaws.com/images/htmlcss/cover/hero.jpg
https://cbmiswebsite-public.s3.eu-central-1.amazonaws.com/images/htmlcss/team/person1.jpg
https://cbmiswebsite-public.s3.eu-central-1.amazonaws.com/images/htmlcss/team/person2. jpeg
https://cbmiswebsite-public.s3.eu-central-1.amazonaws.com/images/htmlcss/team/person3.jpg
https://cbmiswebsite-public.s3.eu-central-1.amazonaws.com/images/htmlcss/team/person4. jpeg

https://cbmiswebsite-public.s3.eu-central-1.amazonaws.com/images/htmlcss/work/work1.jpg
https://cbmiswebsite-public.s3.eu-central-1.amazonaws.com/images/htmlcss/work/work2.jpg
https://cbmiswebsite-public.s3.eu-central-1.amazonaws.com/images/htmlcss/work/work3.jpg

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
140 Full Stack Training (v 2022)
 ‫إنشاء ملف‬
HTML5

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
141 Full Stack Training (v 2022)
 ‫لنبدأ كتابة أول كود علينا أوال إنشاء مجلد ليحتوي الملفات‬
‫التي سنكتبها‬

‫نقوم باختيار المكان الذي سيحتوي المجلد و ننقر على زر‬

‫الفأرة األيمن‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪142‬‬ ‫)‪Full Stack Training (v 2022‬‬
 New ‫نختار خيار‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
143 Full Stack Training (v 2022)
 ‫خيار‬ ‫نختار‬
Folder

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
144 Full Stack Training (v 2022)
 ‫نقوم بتغيير اسم المجلد ألي‬
‫اسم تختاره‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
145 Full Stack Training (v 2022)
 ‫اسم‬ ‫اختيار‬
‫المجلد‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
146 Full Stack Training (v 2022)
 ‫ننقر على الصندوق أعاله و يجب أن ننتبه أن ال يكون هناك أي فراغات أو‬
‫رموز خاصة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
147 Full Stack Training (v 2022)
 ‫ و‬cmd ‫نقوم بمسح كل ما هو مكتوب و كتابة‬
enter ‫ضغط‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
148 Full Stack Training (v 2022)
 ‫ستظهر هذه الشاشة ثم‬
‫ ثم‬. code ‫نقوم بكتابة‬
enter ‫نضغط‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
149 Full Stack Training (v 2022)
 Visual‫ية لبرنامج‬9‫ة الرئيس‬9‫ة و هي الشاش‬9‫ذه الشاش‬9‫ستظهر ه‬
studio code

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
150 Full Stack Training (v 2022)
 ‫إلنشاء ملف جديد ننقر على زر ملف‬
‫جديد‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
151 Full Stack Training (v 2022)
 ‫ بعد اسم الملف لتأكيد أن‬html. ‫نقوم بإضافة اسم الملف الذي تريده واضافة‬
HTML5 ‫الملف مكتوب بلغة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
152 Full Stack Training (v 2022)
 ‫أو يمكنك إنشاء ملف جديد عن طريق فتح‬
File ‫الئحة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
153 Full Stack Training (v 2022)
 New ‫ار‬999999‫اختي‬
File

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
154 Full Stack Training (v 2022)
 ‫مع‬ ‫الملف‬ ‫اختيار اسم‬
html. ‫اضافة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
155 Full Stack Training (v 2022)
 ‫ ستظهر هذه الشاشة لتحديد المكان الذي‬enter ‫بعد ضغط‬
‫ستقوم بحفظ الملف فيه‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
156 Full Stack Training (v 2022)
 ‫ و سيتم إنشاء‬Create File ‫نقوم بالنقر على‬
‫الملف‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
157 Full Stack Training (v 2022)
 ‫هكذا سيبدو شكل الملف في البداية و هنا ستتم‬
‫كتابة الكودات‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
158 Full Stack Training (v 2022)
 ‫ال‬ ‫اسم‬
website

‫ فارغ يضم العناصر‬HTML5 ‫نبدأ بملف‬

‫األساسية‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫إنشاء ال‬
navigation bar

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
160 Full Stack Training (v 2022)
 ‫الرابط الخاص بال‬
logo

1
‫ال‬ ‫سيحتوي‬ ‫الذي‬div ‫نبدأ بإضافة‬
navigation bar
2
element nav ‫نضيف ال‬

3
‫ إلضافة الروابط‬a element ‫نضيف ال‬

4
‫ و يعني أنها‬home# ‫ هي‬href ‫قيمة السمة‬
id ‫ التي تحمل هذا ال‬div ‫ستنقلنا إلى ال‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫بال‬ ‫الخاصة‬ ‫الروابط‬
navigation bar

1
‫ال‬ ‫سيحتوي‬ ‫الذي‬ ‫أخرى‬div ‫إضافة‬
navigation bar
2
‫ننشأ الروابط األخرى بنفس‬
‫الطريقة‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 header ‫إنشاء ال‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
163 Full Stack Training (v 2022)
 ‫الجمل التي أضفناها باإلضافة‬
about ‫ط إلى ال‬999999999‫إلى الراب‬
section
1
home ‫ مع إعطائه ال‬header element ‫نبدأ بال‬
id
2
header elements ‫ الحتواء ال‬div ‫نضيف‬

3
br ‫افة‬9‫ل و إض‬9‫واء الجم‬9‫ الحت‬span element ‫نضيف‬
span ‫ في نهاية كل‬element
4
p ‫ل‬99‫ داخ‬about section ‫ط إلى ال‬99‫نضيف الراب‬
element

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 about ‫إنشاء ال‬
section

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
165 Full Stack Training (v 2022)
 h3 ‫جملة ال‬
element

p ‫جملة ال‬
element

1
‫بال‬ div ‫نضيف‬
about id
2
h3 ‫ل‬99‫ داخ‬ABOUT THE COMPANY ‫ة‬99‫نضيف جمل‬
element
3
p ‫ل‬9‫ داخ‬key features of our company ‫ة‬9‫نضيف جمل‬
element

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫العنوان الرئيسي‬

‫شرح العنوان‬
‫الرئيسي‬

‫‪1‬‬
‫نضيف ‪ div‬الذي يحتوي أجزاء ال ‪about section‬‬
‫الرئيسية‬
‫‪2‬‬
‫نضيف ‪ div‬لك‪99‬ل ج‪99‬زء من ال ‪about‬‬
‫‪section‬‬
‫‪3‬‬
‫نضيف ‪ p element‬يحت‪99‬وي العن‪99‬وان الرئيس‪99‬ي بع‪99‬ده ‪p‬‬
‫‪ element‬آخر يحتوي شرح العنوان الرئيسي‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ الذي سيضم الصور و ننشأ مجلد خاص بكل قسم و‬assets ‫ننشأ المجلد‬
‫إضافة الصور الخاصة به‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
168 Full Stack Training (v 2022)
 ‫جمل‪99999999999‬ة ال ‪h3‬‬
‫‪1‬‬
‫‪ div‬آخر‬ ‫نضيف ‪ div‬الرئيسي و نضيف‬ ‫‪element‬‬
‫للنصوص داخله‬ ‫جمل‪9999999999999‬ة ال ‪p‬‬
‫‪element‬‬
‫‪2‬‬
‫نضيف ‪ h3 element‬و الجملة الخاصة به ثم نضيف الفقرة‬ ‫الرابط إلى ال ‪work‬‬
‫داخل ‪p element‬‬ ‫‪section‬‬
‫‪3‬‬ ‫الصورة التي قمنا‬
‫نضيف الرابط إلى ال ‪ work section‬ياستخدام ال ‪a element‬‬ ‫بإضافتها‬
‫داخل ال ‪p element‬‬
‫‪4‬‬
‫نضيف ‪ div‬الخاص بالصورة و نستخدم ال ‪ img element‬لوضع‬
‫الصورة مع إضافة النص البديل ‪alt‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 team ‫إنشاء ال‬
section

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
170 Full Stack Training (v 2022)
 h3 ‫ة ال‬999999999999‫جمل‬
element

p element ‫جملة ال‬

1
team ‫ال‬9‫ ب‬div ‫نضيف‬
id
2
h3 ‫ل‬99‫ داخ‬THE TEAM ‫ة‬99‫نضيف جمل‬
element
3
p ‫ل‬9‫ داخ‬The ones who runs the company ‫ة‬9‫نضيف جمل‬
element

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫الصورة التي قمنا‬
‫بإضافتها‬

‫نضيف ‪ div‬الرئيسي و نضيف ‪ div‬آخر‬ ‫‪1‬‬

‫للصورة‬
‫نستخدم ال ‪ img element‬لوضع الصورة مع إضافة‬ ‫‪2‬‬
‫النص البديل ‪alt‬‬ ‫جمل‪99999999999‬ة ال ‪h3‬‬
‫نضيف ‪ div‬للنص‪99‬وص داخل‪99‬ه و نضيف اس‪99‬م الش‪99‬خص داخ‪99‬ل ال ‪h3‬‬ ‫‪3‬‬ ‫‪element‬‬
‫‪ element‬نضيف منصب الشخص داخل ‪ p element‬نضيف وصف‬ ‫جم‪99999999999999‬ل ال ‪p‬‬
‫عن الشخص داخل ‪p element‬‬ ‫‪element‬‬
‫نضيف زر ‪ contact‬باس‪999999‬تخدام ال ‪button‬‬ ‫‪4‬‬
‫‪element‬‬ ‫زر ‪contact‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫ننشأ المجلد ‪ assets‬الذي سيضم الصور و ننشأ مجلد خاص بكل‬
‫بتكرار ما فعلناه ليناسب عدد األشخاص في ال‬ ‫قسم و إضافة الصور نقوم‬
‫الخاصة به‬
‫‪team section‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬
‫‪173‬‬ ‫)‪Full Stack Training (v 2022‬‬
 statistical ‫إنشاء ال‬
section

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
174 Full Stack Training (v 2022)
 1
statistics ‫واء ال‬99999‫ الحت‬div ‫نضيف‬
section
2
statistics ‫زء من ال‬9‫ل ج‬9‫اص بك‬9‫ الخ‬div ‫نضيف ال‬
section
3
span ‫ل‬9‫افته داخ‬9‫راد إض‬9‫دد الم‬9‫نضيف الع‬
element span ‫ل‬9999999‫دد داخ‬9999999‫الع‬
element
4
‫ إلضافة سطر جديد ثم نكتب‬br element ‫نضيف‬ ‫اسم الجزء التابع له‬
statistics section ‫اسم الجزء من ال‬ ‫الرفم‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 work section ‫إنشاء ال‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
176 Full Stack Training (v 2022)
 h3 ‫ة ال‬9999999999‫جمل‬
element

p ‫ة ال‬9999999999‫جمل‬
element

1
work ‫ال‬9‫ ب‬div ‫نضيف‬
id
2
h3 ‫ل‬99‫ داخ‬OUR WORK ‫ة‬99‫نضيف جمل‬
element
3
p ‫ل‬9‫ داخ‬What we have done for people ‫ة‬9‫نضيف جمل‬
element

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫الصورة التي قمنا‬
‫بإضافتها‬

1
work section ‫ الذي يحتوي أجزاء ال‬div ‫نضيف‬
‫الرئيسية‬

2
‫ لوضع‬img element ‫ الخاص بالصورة و نستخدم ال‬div ‫نضيف‬
alt ‫الصورة مع إضافة النص البديل‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 skills ‫إنشاء ال‬
section

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
179 Full Stack Training (v 2022)
 1
skills section ‫ الحتواء‬div‫نبدأ ب‬ h3 ‫ة ال‬9999999999999‫جمل‬
element
2
‫ للجزء األول و الذي يحتوي‬div ‫نضيف‬ p ‫ل ال‬999999999999‫جم‬
OUR Skills ‫ فيه عبارة‬h3 element element
‫ الحتواء‬p element ‫ من‬2 ‫نضيف‬ 3
br ‫ع‬99‫زء م‬99‫ة بهذا الج‬99‫رات الخاص‬99‫الفق‬
‫ في النهاية‬element

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 2
‫ للجزء الثاني و الذي‬div ‫نضيف‬
skill ‫ تتضمن ال‬p element ‫يحتوي‬
3
‫ جديد ليحتوي الرقم الموجود‬div ‫نضيف‬ p ‫ة ال‬99999999999‫جمل‬
‫داخله‬ element

div ‫ل ال‬99999‫رقم داخ‬99999‫ال‬

element

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 pricing ‫إنشاء ال‬
section

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
182 Full Stack Training (v 2022)
 h3 ‫جملة ال‬
element

p ‫ل ال‬999999999999‫جم‬
element

h3 ‫ة ال‬9999999999‫جمل‬
element

1 p ‫ل ال‬99999999999‫جم‬
pricing id ‫ بال‬div‫نبدأ ب‬ element

2
h3 ‫ل‬99999‫ داخ‬PRICING ‫ة‬99999‫نضيف جمل‬
element
3
Choose a pricing plan that fits your ‫ة‬99‫نضيف جمل‬
p element ‫ داخل‬needs

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫العنوان الرئيسي‬

‫الفرعية‬ ‫العناوين‬
‫باإلضافة إلى األرقام‬
‫بخط غامق‬

‫جمل‪9999999999‬ة ال ‪h3‬‬
‫‪element‬‬

‫‪1‬‬ ‫جم‪99999999999‬ل ال ‪p‬‬

‫نبدأ بال ‪div‬‬ ‫‪element‬‬
‫الرئيسي‬
‫‪2‬‬
‫نبدأ بال ‪ div‬الذي يحتوي الجزء‬
‫األول‬
‫نضيف ‪ unordered list‬ثم نضيف العن‪9‬وان الرئيس‪9‬ي داخ‪9‬ل ‪li‬‬ ‫‪3‬‬
‫‪ element‬ثم نضيف باقي ال‪ li elements‬و نضع الرقم داخل‬
‫‪b element‬‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 ‫السع‬
‫ر‬

sign ‫افة إلى زر‬99‫ باإلض‬per month ‫ة‬99‫جمل‬

h3 ‫ة ال‬9999999999‫جمل‬
up
element

1 p ‫ل ال‬99999999999‫جم‬
‫الذي‬ li element ‫نضيف‬ element
‫سيتضمن السعر‬
2
per month ‫ و نضيف جملة‬h2 element ‫نضيف السعر داخل‬
span ‫داخل‬
3
‫ بداخله عبارة‬button element ‫ ثم نضيف‬li element ‫نضيف‬
Sign Up

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫ الذي سيضم الصور و ننشأ مجلد خاص بكل‬assets ‫ننشأ المجلد‬
‫قسم و إضافة الصور الخاصة به‬
‫نقوم بتكرار ما فعلناه سابًقا بنفس ال‬
elements

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
186 Full Stack Training (v 2022)
 contact ‫إنشاء ال‬
section

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
187 Full Stack Training (v 2022)
 h3 ‫ة ال‬9999999999999‫جمل‬
element

1 p ‫ة ال‬999999999999‫جمل‬
‫بال‬ div ‫نضيف‬ element
contact id
2
h3 ‫ل‬999‫ داخ‬CONTACT ‫ة‬999‫نضيف جمل‬
element
3
Lets get in touch. Send us a message ‫نضيف جملة‬
p element ‫داخل‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 1 ‫معلومات التواصل‬
p ‫ في‬div ‫ل‬99‫ل داخ‬99‫ات التواص‬99‫نضيف معلوم‬
elements

2
br element ‫نبدأ سطر جديد باستخدام‬

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com Full Stack Training (v 2022)
 ‫‪1‬‬
‫ننشأ ‪ form‬باستخدام ال ‪form element‬‬
‫ال ‪ form‬الذي قمنا‬
‫نضيف الحقول التي يجب أن يدخلها المستخدم داخل‬ ‫‪2‬‬ ‫بإنشائه‬
‫‪input element‬‬

‫نحدد نوع ال ‪ input‬بنوع ‪ text‬و نضيف ‪ placeholder‬ليعرف‬ ‫‪3‬‬

‫المستخدم ما يجب إضافته في كل حقل و نضع ‪ required‬لكي‬
‫ال يتم إرسال ال ‪ form‬إذا لم يقم المستخدم بتعبئة أحد الحقول‬
‫و وضعنا ‪ name‬لكل حقل‬
‫نضيف ال ‪ button‬لسقوم المستخدم بإرسال رسالته بعد تعبئة‬
‫‪4‬‬
‫الحقول بالمعلومات المطلوبة‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬
 footer ‫إنشاء ال‬
section

Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com
191 Full Stack Training (v 2022)
 ‫‪1‬‬
‫نبدأ بإنشاء ال ‪footer‬‬

‫‪2‬‬
‫وض‪9‬ع راب‪9‬ط إلى ال ‪ header‬ال‪9‬ذي يحم‪9‬ل ال ‪id‬‬
‫‪home‬‬
‫‪3‬‬
‫إضافة فقرة تحتوي العبارة ‪ Powered by‬ثم نضيف رابط‬
‫يحمل ال ‪ URL‬الخاص بالشركة ثم نضيف اسم الشركة‬

‫الرابط إلى ال ‪header‬‬

‫موقع‬ ‫إلى‬ ‫الرابط‬

‫الشركة‬

‫‪Copyright ©️CBM Integrated Software Inc. – California USA ®️2008 – 2023 | www.cbmis.com‬‬ ‫)‪Full Stack Training (v 2022‬‬