‫املدقمة‬ ‫األول‬

‫الثانوي‬

‫‪Hyper Text‬‬ ‫تعتبر ‪ HTML‬اختصررا ا ملة ر‬

‫‪ Markup Language‬والتررت تع ررت ا لغررا ل ر‬

‫توصرغ الررال البيرع ت وال تعتبر ‪ HTML‬ل ر‬

‫ب مجغ ر وإنةررا ل ر ت مت ر تعتةررد م ر ا ررت دا‬

‫العالمات‪.‬‬

‫‪1‬‬ ‫‪1‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫ختطيط املوقع‬ ‫األول‬
‫الثانوي‬

‫لل‬ ‫ب ل ل تص ل للموق ي ب ق ل ل‬ ‫قب ل ل‬

‫ل ل ل ل ا اع ل ل ل ل‬ ‫تعل ل ل ل هوكل ل ل ل اع قل ل ل ل‬
‫اعستخ بة فوه‪.‬‬
‫أ‬

‫‪.‬‬ ‫اعش‬ ‫‪ -1‬فتح ب‬

‫للل‬ ‫‪ -2‬الح ل ل ل ابت ل ل ل ا اع ل ل ل اع ل ل ل‬

‫الح تن ُّ ابت ا ا اع‬ ‫املج‬

‫اع ف ك آلتي‪:‬‬ ‫بحس‬

‫أ‪ :Html .‬اع ل ل ل اي ل ل ل تحت ل ل ل ي ل ل ل‬

‫ب ب وة بل ‪. html‬‬ ‫تع وم‬
‫ب‪ :PHP .‬اع ل ل ل ل اي ل ل ل ل تحتل ل ل ل ي ل ل ل ل‬
‫تع وم ب ب وة ب غة ‪.php‬‬
‫ب‬

‫ل ايع ل ب ل اع ل‬ ‫‪ -3‬حت ل ي املج ل‬

‫حو ل للل ص يكل ل ل فل ل ل حة ص ل ل ل ب ل للف‬

‫س اء ك ب ف ‪. PHP HTML‬‬

‫‪1‬‬ ‫‪2‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫ختطيط املوقع‬
‫‪4‬‬
‫ل ب ل ‪ images‬هل‬ ‫ً‬
‫ض‬ ‫‪ -4‬الح‬

‫مو ل ل ايص ل ل اعسل للتخ بة ل ل‬ ‫يتخل لليع‬

‫اع ق ‪.‬‬

‫يك ل‬ ‫‪ -5‬ال يش ل ج ل املج ل ايس ل ب‬

‫ل للتق‬ ‫ل ل تنلل للوق فض ل ل ي م ل ل‬ ‫بل ل‬

‫تقسومه ملج ا ‪.‬‬

‫‪2‬‬ ‫‪3‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫ختطيط الصفحات‬ ‫األول‬
‫الثانوي‬

‫املوقأ أ الأ أ‬ ‫االن علأ أ صأ أ‬ ‫س أأف‬

‫سأ أأفقو ب نش أ أ الحق أ أ و عل أ أ م ت توي أ أ‬
‫‪1‬‬ ‫وله أ أ أ أ ال أ أ أ أ ات أ أ أ أ‬ ‫ه أ أ أ أ الص أ أ أ أ‬
‫‪2‬‬
‫الخطوا اآلتي ‪:‬‬

‫‪ -1‬من خأل املتصأ ‪Google Chrome‬‬

‫أفت ملف ‪.start.html‬‬
‫‪ -2‬ي تب أأف مل أأف ‪ start.html‬ه أأو الصأ أ‬
‫ال يسأأي للقوق أ مأأن خلله أ ق أأن أن‬
‫‪.‬‬ ‫والص‬ ‫أنتقل إل ب قي املل‬
‫‪ -3‬أض ط عل االرت ط التش بي‬
‫" ‪" CLICK HERE TO START‬‬

‫‪3‬‬

‫‪1‬‬ ‫‪4‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫ختطيط الصفحات‬
‫‪4‬‬

‫‪ -4‬س أ أ أ أ أ أ أ أأيت ال نتقأ أ أ أ أ أ أ أ أ إلأ أ أ أ أ أ أ أ أ امللأ أ أ أ أ أ أ أ أأف‬

‫‪.layout.html‬‬
‫‪ -5‬أالح أ أ أ أ أن تخطأ أ أ أأيط ه أ أ أ أ الص أ أ أ أ‬
‫‪ start.html‬فهأأو‬ ‫ختلأأف عأأن ص أ‬
‫ول أ أأل مقط أ أ‬ ‫مقس أ أ إل أ أ عأ أأمق مق أ أ‬
‫م توى وتنسيق خ ص ب ‪.‬‬

‫‪5‬‬

‫‪ -6‬أض أ أ أ أ ط عل أ أ أ أ االرت أ أ أ أ التش أ أ أ أ ي‬

‫أكثف عل ب قي م توي املوق ‪.‬‬ ‫أل‬

‫‪6‬‬

‫‪2‬‬ ‫‪5‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫تعرّف العالمات املخصصة ‪tags‬‬ ‫األول‬
‫الثانوي‬

‫‪1‬‬
‫تتووفر لنا و ن و ن ‪html‬نعالمو نمخصصووعنعدةوود ن‬
‫تمك نمو ننشاو منموتوفصناصوإوعننت‪ ،‬تو نوقودن‬
‫ةكو ووفونر نتو ووفص نتص و و ن ونصو ووف ن ون قو وول ن ون‬
‫ًّ‬
‫نتاعبي ن ونجدوًلن‪..‬ننلخ‪ .‬ن‬ ‫ر تب ط‬
‫ن‬
‫ألتعلفنهذهنراعالم نر خصصعن تبعنرآلتي ن‬
‫ن‬
‫‪ -1‬م و نا ووال نر تص ووإ ن‪ Google Chrome‬ن‬
‫ت نملفن‪start.html‬ن‪.‬‬

‫ن‬
‫ن‬
‫ن‬
‫ن‬
‫ن‬

‫‪ -2‬ضو و و و نز نراإ و و وول نرألةمو و و و نع و و و و نع و و و ووفرون‬

‫راص و ووإوع نومو و و نراق بم و ووعنر ق و ووعن اتو و و ن‬
‫‪. inspect element‬ن ن‬

‫‪2‬‬

‫‪1‬‬ ‫‪6‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعرّف العالمات املخصصة ‪tags‬‬

‫‪ -3‬س و ووي لنتبفي و و ن س و ووإونراص و ووإوعنةوت و ووف ن‬

‫راعالمعنر خصصعنرلخ صعنب اع فرو‬

‫<‪>h1>Welcome to My library</h1‬‬

‫‪3‬‬ ‫‪ -4‬ض نز نراإل نرألةم نع نراصوف نومو ن‬

‫راق بمعنر قعن ات ن‪.inspect element‬‬
‫ن‬
‫ن‬

‫‪ -5‬س و ووي لنتبفي و و ن س و ووإونراص و ووإوعنةوت و ووف ن‬

‫راعالمعنر خصصعنرلخ صعنب اصف ‪.‬‬
‫>"‪<img src="images/book.jpg‬‬

‫‪ -6‬ض و نز نراإوول نر نألةم و نع و نراإقوول نوم و ن‬

‫‪5‬‬ ‫‪inspect‬‬ ‫راق بم و و ووعنر ق و و ووعن اتو و و و ن‬
‫‪.element‬‬

‫‪2‬‬ ‫‪7‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعرّف العالمات املخصصة ‪tags‬‬

‫‪ -7‬سي لنتبفي ن سإونراصإوعنةوتف نع ن‬

‫راعالمعنر خصصعنرلخ صعنب اإقل ‪.‬‬
‫>‪<p>..</p‬‬

‫‪ -8‬ض و و و نز نراإو و وول نرألةم و و و نع و و و نرًل تب و و و ن‬

‫‪7‬‬ ‫راتاووع ن ‪ CLICK HERE TO START‬ن نوم و ن‬
‫‪inspect‬‬ ‫راق بم و و ووعنر ق و و ووعن اتو و و و نن‬
‫‪.element‬‬

‫‪ -9‬سي لنتبفي ن سإونراصإوعنةوتف نع ن‬

‫راعالم و و ووعنر خصص و و ووعنرلخ ص و و ووعنب ًل تبو و و و ن‬
‫راتاع ‪.‬‬
‫‪<a href="layout.html">CLICK HERE TO‬‬
‫>‪START </a‬‬

‫‪ -11‬عي و و و ودنرلخط و و و ووف نراس و و و و بقعنع و و و و نب و و و و ن‬

‫‪9‬‬
‫راع صلنر فجفد ن نراصإوع‪.‬‬

‫‪ً -11‬لحو ووأن ون لل و و نراعالم و و نر خصصو ووعن‬

‫راتو و نت ووضنرستعلرضو و نتتك ووفونمو و نعالمتو و و ن‬
‫نحوودرهم نتوود نع و نبدرةووعنتصووميضنراعالمووع ن‬
‫ورألالصنتد نع ننه ةته ‪.‬‬

‫‪3‬‬ ‫‪8‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء قالب ‪html‬‬ ‫األول‬
‫الثانوي‬

‫موق ي ي‬ ‫يمكنن ي ي أن أب ي ي أ بإنش ي ي أولي ييت ي ي‬

‫م يييييي‬ ‫يييييي‬ ‫الوي ي ي ي ي ي ي م ي ي ي ي ي ي أ م ي ي ي ي ي ي‬
‫‪FrontPage ، MS Word ، FlashDevelop‬‬
‫‪ ، DreamWeaver‬ولكي أب أ علي اتب ع اآلتي‪:‬‬
‫‪1‬‬
‫‪ -1‬أفتح ب ن مج ‪. FlashDevelop‬‬

‫‪ -2‬مي ق ةمي ‪ File‬اختي ‪ New‬ومي ي اختي‬

‫‪. HTML document‬‬

‫‪2‬‬

‫‪1‬‬ ‫‪9‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء قالب ‪html‬‬

‫‪3‬‬
‫‪ -3‬أالحي ييت أن ي ي ت ي ي إنش ي ي مو ي ي ي تي ييو علي ييت‬
‫مخصص ‪ ،‬وتعويم لوص ‪.‬‬ ‫َّ‬ ‫عالم‬

‫‪ -4‬أتأكي ي ااةمي ي أن ي ي ا ن ني ي ي ي ي أن‬

‫تبي أ ب ي <!‪ >DOCTYPE html‬لتي عليت أن‬
‫املو ي ي ي م ي ي ي ني ي ييوع ‪ html‬و تنته ي ي ي ب لعالم ي ي ي‬
‫املخصص >‪. </html‬‬

‫‪4‬‬

‫‪ -5‬ب ي ي ي اخ العالمي ي ي ال ي ي ي ب أالحي ي ييت وجي ي ييوا‬

‫عالمي ي مخصصي ي أخي ي >‪ <head‬ت تي ييو‬
‫علي ي ي ييت البي ن ي ي ي ي ال ي ي ي ي ل ي ي ي ي تع ي ي ي ي عن ي ي ي ي‬
‫استع ا الص ‪.‬‬
‫>‪<html‬‬
‫>‪<head‬‬ ‫ب اي أس الص‬
‫‪5‬‬ ‫>‪</head‬‬ ‫نه ي أس الص‬
‫>‪</html‬‬

‫‪2‬‬ ‫‪10‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء قالب ‪html‬‬

‫>‪ <title></title‬عل ي ي ييت عن ي ي ييوان‬ ‫‪ -6‬ي ي ي ي‬

‫ييي ش ي ين عنييوان‬ ‫الص ي ‪ ،‬الييه سييي‬
‫متص ح ا ن ن ‪ .‬أكت اآلتي‪:‬‬

‫>‪<title> School Library </title‬‬

‫‪6‬‬

‫‪ -7‬أضي ي ييي م تي ي ييو الص ي ي ي ب ي ي ي ن العالم ي ي ي‬

‫املخصص >‪ ، <body></body‬ك ألتي‪:‬‬
‫>‪<body‬‬
‫‪Welcome to My Library‬‬
‫>‪</body‬‬

‫‪7‬‬

‫‪3‬‬ ‫‪11‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء قالب ‪html‬‬

‫‪ -8‬أح ييت املوي ب سي ‪ index1.html‬و ي ي‬

‫أن أتأك أن امت اا املو ‪. html‬‬

‫‪8‬‬

‫‪ -9‬م ي خ ييال املتص ي ح ‪،Google Chrome‬‬

‫أس ي ييتع املوي ي ي ‪ html.index1‬وأالح ي ييت‬
‫ظ ييو اليين ‪ School Library‬ييي ش ي ين‬
‫العنيوان وظ يو الين ‪Welcome to My‬‬
‫‪ Library‬علت الص ‪.‬‬

‫‪9‬‬

‫‪4‬‬ ‫‪12‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج عنوان‬ ‫األول‬
‫الثانوي‬

‫ت ظ وفر إمكاني ظ إضظظاف‬ ‫أالح ظ مظظل ورة ظ‬

‫عن ون إلى ومل قع‪ ،‬وكظ أتمكظل مظل لرظ علظ‬

‫أن أتبع ولخط وت وآلتي ‪:‬‬

‫برن ظظام ‪ ،Flash Develop‬أف ظ‬ ‫‪ -1‬مظظل خ ظ‬

‫ملف ‪. index.html‬‬

‫أ ي ظ ظ ظ أن‬ ‫ورف ظ ظ ظ ف ظ ظ ظ وملكظ ظ ظظان ور ظ ظ ظ‬ ‫‪ -2‬أض ظ ظ ظ‬

‫أضيف ورعن ون فيه‪ ،‬وأك ب وآلت ‪:‬‬

‫>‪<h1>Welcome to My Library </h1‬‬

‫أالحظ أن ورع مظ وصخةةظ رلعنظ ون تبظ أ‬

‫بظ >‪ <h1‬و تن هي بظ >‪.</h1‬‬

‫‪2‬‬
‫‪ -3‬أحف ومللف‪.‬‬

‫‪1‬‬ ‫‪13‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج عنوان‬

‫ومل ة ظظف ‪،Google chrome‬‬ ‫‪ -4‬م ظظل خظ ظ‬

‫أس عرض ومللف ‪.index.html‬‬

‫‪ -5‬أالح ظه ورعن ون على ورةفح ‪.‬‬

‫م حظ ‪:‬‬

‫ي ظ ح م ظظع ورعنظ ون مظظل >‪ <h1‬حتظ >‪<h6‬‬

‫‪4‬‬
‫مل وألكبر إلى وألص ر‪.‬‬

‫‪ -6‬يمكننظظي إعظظاا ولخط ظ ‪ 5-2‬مظظع ت يحظظر م ظظع‬

‫ورعن ظ ظ ون‪ ،‬ألضظ ظظيف عنظ ظظاويل أخظ ظظر ب م ظ ظظا‬
‫مخ لف ‪.‬‬

‫‪2‬‬ ‫‪14‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج الفقرات‬ ‫األول‬
‫الثانوي‬

‫أ‬ ‫ررر‬ ‫ألردج أفقر ر ر أف ر رروأب ر ررلخطأاتر ر ر أ ر ر ر أ‬

:‫آل يط‬

1 ‫أ ف ر أ‬،Flash Develop‫ م ر أخ ر أب نررجم أ‬-1

. index.html‫ملفأ‬
‫أ للر ر ج أف رروأ ا ررج أ ل ر أ جتر ر أك جب ررطأ‬ ‫ ض ر‬-2
:‫أ أا ك أ آلتي‬،‫للق أفيه‬

<p>
The goal of the school library media center is to
ensure that all members of the school‫أ‬
community have equitable access "to books and
reading, to information, and to‫أ‬information
2 technology." A school library media center "uses
all types of‫أ‬media... is automated, and utilizes the
Internet for information gathering,"From My
website you will be able to:‫أ‬
</p>
3

. ‫<أعلىأ للق‬p>‫أ لع مطأ مل صصطأ‬ -3

.‫<أ‬/p>‫ ك أ أنهجيطأ للق أ‬-4

15
 ‫إدراج الفقرات‬

‫‪ -5‬ردج أ لع مر ر ر ررطأ>‪<br/‬أبعر ر ر ر أ للق ر ر ر ر أ أردج أ‬

‫س أج ي ‪.‬‬

‫م حظط‪ :‬أ‬
‫يمكننر ررجأ ردج أع مر ررطأفق ر ر أ خ ر ر أبع ر ر أع مر ررطأ‬
‫‪5‬‬ ‫ي فقم م م‬ ‫ممم‬ ‫ير ر ر أ>‪ ،<br/‬ثم م م‬ ‫لس ر ر ر أ‬
‫مناسبة ملالحظ تأثير عالمة السط الجديد‪.‬‬

‫‪ -6‬حلظأ لف‪.‬‬
‫‪7‬‬

‫‪ -7‬م ر أخ ر أ ص ررل أ‪،Google Chrome‬أ‬

‫س ع ضأ لفأ‪ index.html‬أ‪.‬‬

‫‪ -8‬الحظأاج ردأفق أيليهجأس أج ي ‪.‬‬

‫‪8‬‬

‫‪2‬‬ ‫‪16‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج صورة ‪IMG‬‬ ‫األول‬
‫الثانوي‬

‫أالح ظ مظظا شكل ظ ت ظ شفر إم اني ظ إضظظاف ر ظ‬

‫ي‪ ،‬م ظ إم اني ظ شكظظحجمه طوال ظظا ظ ال‬ ‫إل ظ م ظ‬
‫وعرض ظظا‪ ،‬وإض ظظاف ح ظ و إكيه ظظا‪ ،‬وك ظ أتالم ظظا م ظظا‬
‫ذكك أتب شلخط شت شآلتي ‪:‬‬

‫‪1‬‬
‫رن ظظام ‪،Flash Develop‬‬ ‫‪ -1‬م ظظا رظ ظ‬
‫أفحح شملفل ‪. Index.html‬‬

‫أ يظ وضظ‬ ‫‪ -2‬أضغط شكفظر فظي شمل ظاا شكظ‬

‫فيه‪ ،‬وأكحب شآلت ‪:‬‬ ‫شكص‬

‫>”‪<img src=”images/book.jpg‬‬

‫‪2‬‬ ‫‪.‬‬ ‫‪ :src‬كحج م اا مفل شكص‬

‫‪1‬‬ ‫‪17‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج صورة ‪IMG‬‬

‫‪ -3‬أحف شملفل ‪.‬‬

‫‪4‬‬

‫شملحصظفح ‪،Google chrome‬‬ ‫‪ -4‬مظا رظ‬

‫أسحعرض مفل ‪. index.html‬‬

‫ف ظ ظظي شمل ظ ظظاا شك ظ ظ‬ ‫‪ -5‬أالح ظ ظ وج ظ ظ ر ظ ظ‬

‫ح ته سا قا‪.‬‬

‫‪5‬‬

‫‪2‬‬ ‫‪18‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج اجلداول‬ ‫األول‬
‫الثانوي‬

‫تستخدم الجداول لتسهيل عملية تصنيف‬

‫وعرض البيانات‪ ،‬ويتكون الجدول من‪:‬‬
‫أ‪ .‬خلية رأس العمود‪ :‬و يرمز لها ب‬
‫>‪ <th‬ويستخدم لتحديد عناوين‬
‫الجدول‪.‬‬
‫ب‪ .‬صف الجدول‪ :‬و يرمز له ب >‪<tr‬‬
‫نحدد عدد الصفوف ‪.‬‬‫ومنه ّ‬
‫ج‪ .‬خلية البيانات‪ :‬و يرمز لها ب >‪<td‬‬
‫ومنها ّ‬
‫نحدد عدد األعمدة ‪.‬‬

‫س أ أ أ وم بأ أ أ أإدراج ج أ أ أأدول يتك أ أ أأون م أ أ أأن ص أ أ أأف ن‬

‫وعمأودين‪ ،‬بحيأ تكأأون كنأا خليتأان لعنأأاوين‬
‫‪1‬‬ ‫الجدول‪.‬‬

‫‪ -1‬مأن خألل برنأام ‪ ، Flash Develop‬أفأت‬

‫ملف ‪. Index.html‬‬

‫‪ -2‬أض أ بالف أ رة ف أأمل انك أأان ال أ أري أأد إدراج‬

‫الج أ أ أأدول و يج أ أ أأب أن يك أ أ أأون ب أ أ أ ن علم أ أ أ‬
‫>‪ ،<body></body‬وأكتب اآلتي‪:‬‬
‫>‪<table‬‬
‫‪3‬‬ ‫>‪</table‬‬

‫‪1‬‬ ‫‪19‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج اجلداول‬

‫‪ -3‬أدرج الصف األول من الجدول ‪:‬‬

‫>‪<tr></tr‬‬
‫ملحظة‪:‬‬
‫ُ‬
‫‪3‬‬ ‫تض أ أأاف >‪ </tr‬م أ أأن ب ب أ أأل ال ن أ أأام لتب أ أ ن هاي أ أأة‬
‫الصف‪.‬‬

‫‪ -4‬أدرج خلي أأة العن أأوان‪ ،‬و يج أأب أن أت ك أأد م أأن‬

‫أضافتها ب ن علم ّ >‪: <tr> </tr‬‬
‫>‪<tr‬‬
‫>‪<th>Student Name</th‬‬
‫>‪<th>Student ID</th‬‬
‫>‪</tr‬‬
‫‪4‬‬
‫أالح أ أن تك أرار >‪ <th> </th‬كأأو مأأا يحأأدد‬
‫ع أأدد األعم أأدة ف أأمل الج أأدول‪ ،‬فف أأي ان أأال يتك أأون‬
‫الجدول من عمودين نتيجة لتكأرار >‪<th> </th‬‬
‫مرت ن ‪.‬‬

‫‪ -5‬ألدرج ص أ أ أأفا آخ أ أ أأر ل ج أ أ أأدول‪ .‬أعي أ أ أد تك أ أ أرار‬

‫الخطوة ‪. 4‬‬

‫‪ -6‬أدرج خليأأة البيانأأات‪ ،‬و يجأأب أن أت كأأد مأأن‬

‫إضافتها ب ن علم >‪: <tr> </tr‬‬
‫>‪<tr‬‬
‫>‪<td>Mohammed Moosa</td‬‬
‫>‪<td> 20030011</td‬‬
‫‪6‬‬ ‫>‪</tr‬‬

‫‪2‬‬ ‫‪20‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج اجلداول‬

‫أالح أ أن تك أرار >‪ <td> </td‬ضأأمن نف أ‬

‫الص أ أأف >‪ <tr‬ك أ أأو م أ أأا يح أ أأدد ع أ أأدد األعم أ أأدة ف أ أأمل‬
‫الجأأدول‪ ،‬ففأأي ك أ ا ان أأال يتكأأون الجأأدول مأأن‬
‫عمودين نتيجة لتكرار >‪ <td> </td‬مرت ن ‪.‬‬

‫‪ -7‬أت كأأد مأأن وجأأود >‪ </table‬لتأأدل ع أأا هايأأة‬

‫تصميم الجدول‪.‬‬

‫‪7‬‬ ‫‪ -8‬أحف انلف‪.‬‬

‫‪ -9‬م أأن خ أألل انتص أأف ‪،Google Chrome‬‬
‫أستعرض انلف ‪. index.html‬‬
‫‪9‬‬

‫‪ -11‬أالح أ أ فق أ أ وج أ أأود بيان أ أأات الج أ أأدول‪،‬‬

‫وذلك بسبب عأدم تنسأي الجأدول و كأو مأا‬
‫سنتعلمه الحقا‪.‬‬

‫‪11‬‬

‫‪3‬‬ ‫‪21‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج االرتباط التشعيب‬ ‫األول‬
‫الثانوي‬

‫تعتبر االرتباطات التشعبية من أهم العالمات‬

‫التي ندرجها في املواقع‪ ،‬إذ إنها تربط صفحات‬
‫املوقع بعضها ببعض‪ ،‬وتربط صفحة بمواقع‬
‫أخرى‪ ،‬وتربط صفحة بملفات معينة‪.‬‬

‫‪،Google chrome‬‬ ‫من خالل املتصفح‬

‫أستعرض ملف ‪ start.html‬و أالحظ وجود‬
‫ارتباط تشعبي ينقلني مللف ‪. layout.html‬‬

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

‫‪ ، manageBooks.html‬ليظهر كما بامللف‬
‫‪1‬‬ ‫السابق‪ ،‬ولعمل ذلك أتبع اآلتي‪:‬‬

‫‪ -1‬من خالالل برنالام ‪ ،Flash Develop‬أفالتح‬

‫ملف ‪. index.html‬‬

‫‪ -2‬أنتقالالل إلالالى املوقالالع ال ال أريالالد أن أدرج في ال‬

‫االرتباط التشعبي‪ ،‬وأكتب اآلتي‪:‬‬

‫‪2‬‬ ‫‪<a href="manageBooks.html">Click‬‬

‫>‪here to start</a‬‬

‫‪1‬‬ ‫‪22‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إدراج االرتباط التشعيب‬

‫أ‪ :Href .‬للداللة على االرتباط ال‬

‫ستنتقل إلي ‪ ،‬فقد يكون صفحة في‬
‫نفس املجلد‪ ،‬أو من مجلد آخر‪ ،‬أو حتى‬
‫عنوان لصفحة ويب‪ ،‬ويجب أن أتأكد‬
‫بأن العنوان كتب بشكل صحيح وكامل‪.‬‬

‫أ‬ ‫ب‬ ‫ب‪ : CLICK HERE TO START .‬العبارة‬

‫التي ستظهر لزوار املوقع و يمكن‬
‫تغييرها ‪.‬‬

‫‪ -3‬أحفظ امللف‪.‬‬
‫‪4‬‬

‫‪ -4‬مالالن خالالالل املتصالالفح ‪،Google Chrome‬‬

‫أستعرض امللف ‪. index.html‬‬

‫‪ -5‬أالحال ال ال الالظ وجال ال ال الالود ارتبال ال ال الالاط تشال ال ال الالعبي‪ ،‬عنال ال ال الالد‬
‫الض ال ال ال ال ال ال الالغط عليال ال ال ال ال ال ال ال ينقلن ال ال ال ال ال ال الالي للمل ال ال ال ال ال ال الالف‬
‫‪. manageBooks.html‬‬

‫‪5‬‬

‫‪2‬‬ ‫‪23‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫تقسيم الصفحة باستخدام عالمة ‪div‬‬ ‫األول‬
‫الثانوي‬

‫ر ر ر ر >‪ <div‬ر ر ر ر ر ر ر ر هر ر ر ر‬ ‫تعتبر ر ر ر‬

‫م‬
‫رر رر‬ ‫الع ر ر ر ر ‪ html‬إذ إنهر ر ت ر ررت‬
‫تق ي صفح الويب؛ ل هول رضه ‪.‬‬

‫ال ر شر الحررفح ا ويررل ر الحررو ‪،‬‬

‫‪ ،‬و حت ر ر ررو ‪،‬‬ ‫ليتب ر ر ررسم نهر ر ر ر ق ر ر ر ر إلر ر ر ر‬
‫وق ئ ر ‪ ،‬وذي ر ‪ .‬و ك ر ق ر خه ر ل ر ح ئح ر‬
‫( لوم لفي – إط – ط – وقع ‪ ..‬إلخ )‪.‬‬

‫ا م وتعريفه ر ؛ ت ر‬ ‫سرروقو ب رإد اج التق رري‬

‫ن قه ال ق‬

‫‪1‬‬ ‫ل برن ج ‪ ، Flash Develop‬فتح‬ ‫‪-1‬‬

‫ا لف ‪.managebooks.html‬‬
‫ت ر ر ر ر ر ر ر >‪<body></body‬‬ ‫‪ -2‬د ج ب ر ر ر ر ر ر ررسم‬
‫لر ر ر‬ ‫ا قط ر ررع الس سر ر ر ‪ container‬الر ر ر‬
‫عرف ‪ id‬ك تي‬

‫بداية التقسيم الساس ي>"‪<div id="container‬‬

‫>‪< < /div‬‬

‫‪2‬‬

‫‪1‬‬ ‫‪24‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تقسيم الصفحة باستخدام عالمة ‪div‬‬

‫ا‬
‫يوتي‬ ‫‪ -3‬د ج ك‬
‫‪ ‬ا قطع العلو ول صنف ‪. bar‬‬
‫‪ ‬قطع القوائ و ل عرف ‪. sidebar‬‬
‫قطع املحتو و ل عرف ‪.contents‬‬ ‫‪‬‬
‫‪ ‬قطع ال ي و ل صنف ‪. bar‬‬

‫وذلك ل النحو ا تي‬

‫‪3‬‬ ‫>"‪<div id="container‬‬

‫>‪<div class=” bar ” > </div‬‬ ‫قطع الحفح‬
‫>‪<div id ="sidebar"> </div‬‬ ‫قطع القوائ‬
‫>‪<div id="contents"></div‬‬ ‫قطع املحتو‬
‫>‪<div class=” bar” ></div‬‬ ‫قطع ال ي‬
‫>‪</div‬‬

‫م هنر ط قطعررسم له ر نفر الحررنف‬ ‫ال ر‬

‫‪ ، bar‬إذ إم الحنف يوفر لن إ ني است ا‬
‫ر ا عرررف‬ ‫ررر ‪ ،‬ل ر‬ ‫التن رريق لكم ر ر‬
‫ر ر ر ر اس ر ر ررت ا إال ر ر ررر‬ ‫‪ id‬؛ إذ لر ر ر ر ن ر ر ررت‬
‫‪.‬‬ ‫وا‬

‫ف ا لف‪.‬‬ ‫‪-4‬‬

‫‪2‬‬ ‫‪25‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تقسيم الصفحة باستخدام عالمة ‪div‬‬
‫‪5‬‬
‫‪ -5‬س ررتعر ا ل ررف ‪manageBooks.html‬‬
‫ل ‪.Google Chrome‬‬

‫ل ر ر تعر ررر ‪ ،‬ل ر ر ا‬ ‫م التق ر رري‬ ‫‪ -6‬ال ر ر‬

‫ه‬ ‫نحت ر ج إل ر تن رريق إض ر في ‪ ،‬س ررن‬
‫ً‬
‫ال ق ‪.‬‬
‫‪6‬‬

‫ل ر ر ر الج ر ر ر‬ ‫‪ -7‬ضر ر ررأط الفر ر ررو الي ر ر ر‬

‫‪inspect‬‬ ‫العلر ررو الحر ررفح ‪ ،‬و ت ر ر‬
‫‪.element‬‬

‫‪7‬‬
‫‪ -8‬سيظهر ل تبويب سف الحفح يحترو‬
‫لر الع ر امل ححر ال صر بر قطع‬
‫ق ت ب لضأط لي ‪.‬‬ ‫ال‬

‫‪8‬‬
‫‪3‬‬ ‫‪26‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫عالمة اإلطار املضمن ‪Iframe‬‬ ‫األول‬
‫الثانوي‬

‫و و و و و >‪ <Iframe‬إ كانيو و و و و و و و و و‬ ‫تو و و و و‬

‫صفح ضمن صفح أخ ى‪.‬‬

‫‪1‬‬ ‫سوقو بوإدراج إطوار مومن و اسو ‪inf : name‬‬

‫و عمل ذ ك اتبع اآليت‪:‬‬

‫‪ -1‬وون خو و ب ن ووا ‪ ،flash develop‬أ و و‬

‫لف ‪. manageBooks1.html‬‬

‫‪ -2‬يظه و و و و ا طو و و ووار اممو و و وومن ب و و و و اخل و و و ووع‬

‫ام ع‬ ‫‪ ، contents‬أدرج اآليت‪ :‬بع‬
‫>‪<iframe name="inf"> </iframe‬‬

‫سقس و و و‬ ‫ي و و و ‪ Name‬الس و و و ا طو و ووار ا و و و‬

‫الح ا ع صفح ويب ب اخل ‪.‬‬
‫‪2‬‬

‫‪ -3‬أحفظ املف‪.‬‬

‫‪ -4‬وون خو و ام ص ووف ‪،Google Chrome‬‬

‫أس ع املف ‪. manageBooks1.html‬‬

‫‪4‬‬

‫‪1‬‬ ‫‪27‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫استخدام عالمة اإلطار املضمن ‪Iframe‬‬ ‫األول‬
‫الثانوي‬

‫سأقوم بإضافة ارتباط تشعبي‪ ،‬بحيث يتم‬

‫عرض الصفحة داخل الطار املضمن ‪iframe‬‬
‫الذي تمت إضافته‪ ،‬عوضا عن فتحها في‬
‫صفحة جديدة‪ ،‬ولعمل ذلك أتبع الخطوات‬
‫‪1‬‬
‫اآلتية‪:‬‬
‫‪ -1‬منن خنل برننام ‪ ، Flash Develop‬أفننت‬
‫ملف ‪. manageBooks1.html‬‬

‫‪ -2‬أدرج التالي ضمن علمات االرتباط التشعبي‬

‫املوجودة مسبقا‪:‬‬
‫"‪target="inf‬‬

‫يد ‪ Target‬على اسنم الطنار املضنمن النذي تنم‬

‫‪2‬‬ ‫تحديده سابقا ‪.‬‬

‫‪4‬‬ ‫‪ -3‬أحفظ امللف‪.‬‬

‫‪ -4‬م ننن خ ننل املتص ننف ‪،Google Chrome‬‬

‫أستعرض امللف ‪.manageBooks1.html‬‬

‫‪ -5‬أضغط على االرتباط التشعبي‪ ،‬وأالحنظ أن‬

‫الصفحة تم عرضها في الطار املضمن‪.‬‬

‫‪5‬‬

‫‪1‬‬ ‫‪28‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫‪In-Line Style Sheet‬‬ ‫األول‬
‫الثانوي‬

‫ت ت ‪In-line Style Sheet‬‬ ‫تست تتريقة‬

‫ت ت ت ‪ html‬بش ت تتر ل ت ت ت لت ت ت‬ ‫لرنس ت تتت‬
‫بإض ت ت ال ل ت ت ‪ style‬د خ ت ت ل ت ت ت ت د‬
‫طلوب ‪.‬‬ ‫تنست ه ن ثم إدر ج لرنست‬

‫اللرغتير نمط ختط ل نتو ‪welcome to my‬‬

‫‪ library‬إلت ئت تغتيتتر ح تت إلت لوستتط‬
‫تلع آلتي‪:‬‬

‫‪ -1‬تتن خت ت ب نت ت ‪Flash Develop‬‬

‫أ ال ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت تتر ل ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت ت‬
‫‪. library/CSS/index.html‬‬

‫ت ت ت ت ‪ h1‬لرنس ت ت ت تتت‬ ‫‪ -2‬أدرج د خ ت ت ت ت ل‬

‫لر لت ‪:‬‬

‫‪2‬‬
‫لرنست نمط لخط إل ئ نكرب‪:‬‬
‫‪font-style: Italic‬‬
‫لرنست ح ة لنص إل لوسط نكرب‪:‬‬
‫‪text-align: center‬‬

‫‪ h1‬لنه ئت ك آلتي‪:‬‬ ‫ترو ت كتل‬

‫;‪<h1 style="font-style: italic‬‬
‫‪text-align:center”> Welcome to‬‬
‫>‪my library </h1‬‬

‫‪1‬‬ ‫‪29‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫‪In-Line Style Sheet‬‬

‫مالحظة ‪:‬‬
‫ب لل ت ت تتل‬ ‫يج ت ت تتب للت ت ت ت ب ت ت تتي لرنس ت ت تتت‬
‫ن و (;)‬

‫‪ -3‬أحلظ ل‬

‫رتتل ‪.Google Chrome‬‬ ‫‪ -4‬ن خ‬

‫‪5‬‬
‫أسر ض ل ‪. Index.html‬‬

‫‪ -5‬أالحظ تغتير نمط نص ل نو‬

‫”‪“welcome to my library‬‬
‫إل ت ئ ت ملح ت ة لت ت لوس تتط د‬
‫لرتثثير ىت ل نتو ‪Future School‬‬
‫‪.Library‬‬

‫ت ‪ Inline style‬تتترث‬ ‫رضتتم تتن لت أ‬

‫وجودة اليه ‪.‬‬ ‫ال ط ل ل‬

‫‪2‬‬ ‫‪30‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫‪Embedded Style Sheet‬‬ ‫األول‬
‫الثانوي‬

‫تستخدم طريقة ‪Embedded Style Sheet‬‬

‫لتسهيل عملية تنسيق جميع العالمات التي‬
‫تحمل نفس االسم مرة واحدة ‪ ،‬ولتطبيق ذلك‬
‫أقوم بـاألتي‪:‬‬
‫‪ -1‬مـ ـ ــال برن ــام ‪،Flash Develop‬‬
‫أ ف ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــت املل ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ‬
‫‪. library/CSS/index.html‬‬
‫‪ -2‬بعـ ـ ــد العالم ـ ـ ــة >‪ <head‬ن ـ ـ ــد العالم ـ ـ ــة‬
‫>‪ ،<Style‬ونكت ـ ــل اس ـ ــم العالم ـ ــة املـ ـ ـرا‬
‫تنسيقها‪ ،‬ثم نضي التنسيقات اآلتية‪:‬‬
‫لتغيي ـ ـ ـ حجـ ـ ــم الح ـ ـ ـ ـ ـ ـ ال جـ ـ ــم ‪22‬‬
‫نكتل‪:‬‬
‫;‪font-size: 24px‬‬
‫النص نكتل‪:‬‬ ‫ولتغيي سمك‬
‫;‪font-weight: bold‬‬

‫لتكون تركيبة عالمة ‪ h1‬النهائية كاآلتي‪:‬‬

‫‪h1‬‬
‫{‬
‫;‪font-size: 24px‬‬
‫;‪font-weight: bold‬‬
‫}‬
‫‪2‬‬ ‫مالحظة ‪:‬‬
‫ظظظظظ‬ ‫ظظظظظ‬ ‫ظظظظظ‬ ‫الح ظ ظ ظ ظ ظظت ت ظ ظ ظ ظ ظ‬
‫بتنس قات عالمة ‪.h1‬‬

‫‪1‬‬ ‫‪31‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫‪Embedded Style Sheet‬‬

‫‪ -3‬أحفظ املل ‪.‬‬

‫ـ ــال برنـ ــام‬ ‫‪ -2‬أس ــتعرف المـ ــفحة مـ ـ‬

‫‪5‬‬ ‫‪.Google Chrome‬‬

‫‪ -5‬أالحـ ـ ـ ــظ تغيي ـ ـ ـ ـ حجـ ـ ـ ــم ـ ـ ـ ـ وسـ ـ ـ ــمك‬

‫العناوي ‪.‬‬

‫ويتضح م ذلك أن طريقة ‪embedded style‬‬

‫‪ sheet‬تؤثر في كل العالمات ذات االسم الواحـد‬
‫ا ل المفحة فق ‪.‬‬

‫‪2‬‬ ‫‪32‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫‪External Style Sheet‬‬ ‫األول‬
‫الثانوي‬

‫تعتبر الطريقة األفضل للتنسيق‪ ،‬وهي‬

‫الطريقة التي سنستخدمها‪ ،‬حيث تكتب جميع‬
‫التنسيقات في ملف خارجي ينتهي باالمتداد‬
‫‪ ،Css‬مما يسهل عملية تعديلها ‪.‬‬
‫ويمكن تطبيق هذه التنسيقات على‬
‫أكثر من صفحة ويب‪ ،‬بل تطبيقها على أكثر من‬
‫موقع ويب دون الحاجة الى كتابة التنسيقات‬
‫مرة أخرى؛ مما يوفر الكثير من الوقت والجهد‬
‫ويشار إلى ذلك امللف برابط داخل‬
‫صفحة ‪ HTML‬داخل العالمة ‪،head‬‬
‫ولتطبيق ذلك أقوم بـاآلتي‪:‬‬
‫ج‬

‫‪ -1‬مــن خــال برنــام ‪ ،Flash Develop‬افــت‬

‫امللف ‪. library/CSS/formatting.css‬‬

‫مالحظة ‪:‬‬
‫في هذا امللف لن نكتب الخاصية ‪ Style‬كما‬
‫يحدث في طريقة ‪ inline stylesheet‬أو طريقة‬
‫‪ ،embedded stylesheet‬بل نكتب‬
‫التنسيقات بشكل مباشر‪.‬‬

‫‪1‬‬ ‫‪33‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫‪External Style Sheet‬‬

‫‪ -2‬أدرج العالم ـ ـ ـ ــة ‪ h1‬وأض ـ ـ ـ ــيف التنس ـ ـ ـ ــيقات‬

‫‪2‬‬ ‫اآلتية‪:‬‬
‫‪h1‬‬
‫{‬
‫;‪color: red‬‬
‫لتغيير لون الخط استخدم الخاصية ‪color‬‬
‫واكتب اللون األحمر‪.red‬‬
‫;‪font-family: Georgia‬‬
‫ولتغيير نوع خط النص استخدم الخاصية‬
‫‪ font-family‬واكتب ‪Georgia‬‬
‫}‬

‫لتكون تركيبة عالمة ‪ h1‬النهائية كاآلتي‪:‬‬

‫‪5‬‬
‫‪h1‬‬
‫{‬
‫;‪color: red‬‬
‫;‪font-family: Georgia‬‬
‫}‬
‫‪ -3‬احفظ امللف‬

‫‪ -4‬م ــن خـ ــال املت ــف ‪Google Chrome‬‬

‫ا س ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــتعر املل ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــف‬
‫‪library/CSS/index.html‬‬

‫‪ -5‬أالحــظ أنــم ل ـ يحــدث ل‬

‫أل تــاتير للتنســيقات‬
‫التي قمنا بإدراجها داخل امللف‪ .‬ملاذا؟‬
‫ألننا ل نربط ملف ‪formatting.css‬‬
‫بال فحة ‪.index.html‬‬

‫‪2‬‬ ‫‪34‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫‪External Style Sheet‬‬

‫وإلضافة الرابط اقوم باآلتي ‪:‬‬

‫‪ -6‬أف ـ ـ ـ ـ ــت املل ـ ـ ـ ـ ــف ‪ index.html‬وأدرج بع ـ ـ ـ ـ ــد‬

‫العالم ـ ـ ــة >‪ < head‬عالم ـ ـ ــة ال ـ ـ ــربط >‪<link‬‬
‫كما ياتي‪:‬‬

‫"‪<link rel="stylesheet‬‬

‫لتحديد نمط امللف كملف تنسيق استخدم‬

‫الخاصية ‪ rel‬واكتب ‪.stylesheet‬‬
‫‪6‬‬
‫"‪href="formatting.css‬‬
‫لتحديد اس ومكان ملف ‪ Css‬أستخدم‬
‫الخاصية ‪. href‬‬

‫>‪type="text/css"/‬‬

‫لتحديد نوع ملف التنسيق من النوع النص ي‬

‫أستخدم الخاصية ‪.type‬‬

‫لتكون تركيبة عالمة ‪ link‬النهائية كاآلتي‪:‬‬

‫"‪<link rel="stylesheet‬‬
‫"‪href="formatting.css‬‬
‫>‪type="text/css"/‬‬
‫‪ -7‬أحفظ امللف‪.‬‬

‫‪3‬‬ ‫‪35‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫‪External Style Sheet‬‬

‫‪ -8‬م ــن خ ــال املت ــف ‪، Google Chrome‬‬

‫أ س ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــتعر املل ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــف‬
‫‪library/CSS/index.html‬‬
‫‪9‬‬

‫ل‬
‫‪ -9‬أالح ـ ـ ـ ـ ـ ـ ـ ــظ أن ـ ـ ـ ـ ـ ـ ـ ــم تـ ـ ـ ـ ـ ـ ـ ـ ـ رب ـ ـ ـ ـ ـ ـ ـ ــط املل ـ ـ ـ ـ ـ ـ ـ ــف‬
‫‪ Formatting.Css‬بـ ـ ـ ـ ـ ــامللف ‪index.html‬‬
‫وتـ تغييــر لــون نــص العنــاوين ‪ h1‬إلــى اللــون‬
‫األحم ر ر ر ررر ‪ ،Red‬ون ـ ـ ـ ــوع خ ـ ـ ـ ــط ال ـ ـ ـ ــنص إل ـ ـ ـ ــى‬
‫‪.Georgia‬‬

‫‪4‬‬ ‫‪36‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إضافة تعليق ‪Comment‬‬ ‫األول‬
‫الثانوي‬

‫تعتبر ررعليقتع من ر ر شلير ررهليّي ر ر ل ر ر ليّ م ر ر ل‬

‫ُ‬
‫رعيتلمي ر لبص ر مال ُل ي ر ل ر ل‬ ‫ق ُ ص ر و الُيرب ر و‬
‫ير يقر ر ررمكل مر ر ررةل ُ ويي ر ر ر لير ر ررهل ت ر ر ر لتع م ر ر ر ل ُل‬
‫‪3‬‬ ‫يال ظ ل للُظمف ل ذيليقتنسم ‪ .‬ل‬
‫ل‬
‫ُّد ج لتع من ش لب ضمحم لديخل لي فل‬
‫‪formatting.css‬ل ق مل ل أتي ‪ :‬ل‬
‫ل‬

‫‪ -1‬ي ر ررهلخ ر رراللل نر ر ر يتل‪Flash Develop‬لكل‬

‫سر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ررتع ل ير ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ررفل‬
‫‪library/CSS/formatting.css‬ل‬
‫‪5‬‬
‫‪ -2‬للد يجلتع م ر ل ر ل دل ر لل ررللنتللللُ نت ر ل‬
‫تنل‬

‫‪ -3‬د جلتع م لفيل ي لير فلُقمك دلليثال‪ :‬ل‬

‫‪/* This file contains comments */‬‬
‫ل‬
‫فظلير ف‬ ‫‪-4‬‬

‫‪ -5‬ي ررهلخ رراللليرتص ررف ل‪.Google Chrome‬ل‬

‫سر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ررتع ل ير ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ررفل‬
‫‪ library/CSS/Index.html‬ل‬
‫ل‬

‫لل ظل دليقتع م للل ظه لملىليقصفح ‪ .‬ل‬

‫ل‬
‫ل‬
‫ل‬
‫ل‬
‫‪1‬‬ ‫‪37‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬ ‫ل‬
 ‫تنسيق النصوص‬ ‫األول‬
‫الثانوي‬

‫ال تخلو صفحات اإلنترنت من النصوص‬

‫املنسقة‪ ،‬وللتعرف على تنسيق النص بامللف‬
‫‪ start.html‬أتبع اآلتي‪:‬‬
‫‪ .1‬مننن لننملت املتصننف ‪Google Chrome‬‬
‫أس ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر امللن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪library/CSS/Start.html‬‬

‫‪ .2‬أضغط زر الفأرة األيمن على النص‪،‬‬

‫ومن القائمة املنبثقة ألتار ‪inspect‬‬
‫‪. element‬‬

‫‪2‬‬

‫‪ .3‬سيظهر تبويب أسفل يمين الصفحة‬

‫يحتوي تنسيقات ‪ Css‬املطبقة على‬
‫النص‪ ،‬وهي كاآلتي‪:‬‬

‫حجم الخط يساوي ‪ 22‬بكسل‪.‬‬ ‫‪-‬‬

‫نمط الخط مائل‪.‬‬ ‫‪-‬‬
‫ُسمك الخط غامق‪.‬‬ ‫‪-‬‬
‫نوع الخط ‪. Times new roman‬‬ ‫‪-‬‬
‫لون الخط األسود‪.‬‬ ‫‪-‬‬

‫‪3‬‬

‫‪1‬‬ ‫‪38‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق النصوص‬

‫لتنسيق النصوص في ملف ‪ Index.html‬وجب‬

‫علي إدراج التنسيقات املطلوبة في امللف‬
‫‪ ، formatting.css‬ولعمل ذلك أتبع اآلتي‪:‬‬

‫‪ -1‬مننن لننملت برنننام ‪ ،Flash Develop‬أفننت‬

‫‪2‬‬ ‫امللف ‪library/CSS/Formatting.css‬‬

‫‪ -2‬أدرج العملمة ‪ p‬وأضيف التنسيقات اآلتية‪:‬‬

‫‪P‬‬
‫{‬
‫;‪Font-size: 20px‬‬
‫أس ننتخلخ الخاص ننية ‪ font-size‬لتحلي ننل حج ننم‬
‫الخننط واكتننب ‪ 22‬بكسننل‪ ،‬ووحننلة اينناخ الخننط‬
‫املستخلمة هي بكسل وتختصر إلى ‪.px‬‬

‫;‪Font-style: italic‬‬
‫ا‬ ‫لتحليل نمط الخط سواء كان ًّ‬
‫عاديا أو مائمل‬
‫أستخلخ الخاصية ‪.Font-style‬‬

‫;‪Font-weight: bold‬‬

‫لتحليل ُسمك الخط أستخلخ الخاصية‬

‫‪.Font-weight‬‬

‫‪Font-family: "Times new roman",‬‬

‫;‪Georgia, Serif‬‬

‫لتحليل نوع الخط املستخلخ في املواع أو‬

‫الصفحة أستخلخ الخاصية ‪.font-family‬‬

‫‪2‬‬ ‫‪39‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق النصوص‬

‫مملحظة ‪:‬‬
‫أالحظ إضافة أكثر من نوع من الخطوط‪،‬‬
‫بحيث إذا لم يوجل الخط األوت على جهاز‬
‫املستخلخ أو ال يلعمه املتصف ‪ ،‬فإن علينا‬
‫التيار الخط التالي ضمن القائمة‪.‬‬

‫نملحظ كذلك ّأن الخط ‪Times New‬‬

‫‪ Roman‬يوجل بين عملمتي تنصيص " "‪ ،‬وذلك‬
‫ّ‬
‫ألنه يتكون من علة مقاطع بعكس الخط‬
‫‪.Georgia‬‬

‫;‪Color: black‬‬
‫لتغيير لون النص أستخلخ الخاصية ‪color‬‬
‫وأكتب اللون األسود ‪.black‬‬

‫لتكون الجملة النهائية كاآلتي‪:‬‬

‫‪P‬‬
‫{‬
‫;‪Font-size: 20px‬‬
‫;‪Font-style: italic‬‬
‫;‪Font-weight: bold‬‬
‫‪Font-family: "Times new roman",‬‬
‫;‪Georgia, Serif‬‬
‫;‪Color:black‬‬
‫}‬
‫‪ -3‬أحفظ امللف ‪.‬‬

‫‪3‬‬ ‫‪40‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق النصوص‬

‫‪ -4‬من لملت املتصف ‪،Google Chrome‬‬

‫‪ -5‬أ سن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر امللن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪ library/CSS/index.html‬وأالحظ تغيير‬
‫وسمك ونمط النص‪.‬‬ ‫حجم ونوع ولون ُ‬

‫تنبيه‪:‬‬
‫‪ ‬ليتم تنسيق مكونات الصفحة‬
‫‪ Index.html‬وذلك طبقا للتنسيقات التي‬
‫ملف‬ ‫دالل‬ ‫بإدراجها‬ ‫امت‬
‫‪ ،Formatting.Css‬يجب علي أوال ربط‬
‫بامللف‬ ‫‪formatting.css‬‬ ‫ملف‬
‫‪ index.html‬وذلك بالكيفية التي تم‬
‫شرحها في الجزء الخاص ‪External Style‬‬
‫‪.Sheet‬‬
‫‪4‬‬

‫عنل استعرا الصفحة ‪Index.html‬‬ ‫‪‬‬

‫سوف يتم تطبيق جميع التنسيقات امللرجة‬

‫في امللف ‪ ( formatting.Css‬إن وجلت )‬
‫وليس فقط ما امت بإدراجه هنا ‪.‬‬

‫‪4‬‬ ‫‪41‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق الصور‬ ‫األول‬
‫الثانوي‬
‫‪2‬‬
‫ّ‬
‫تعتبر الصور من أكثر العناصر التي تضفي على‬
‫ًّ‬
‫جماليا‪ ،‬فناد ًرا ما نجد موقع من‬ ‫الصفحة ً‬
‫تأثيرا‬
‫املواقع يخلو منها‪ ،‬وللتعرف على تنسيق‬
‫الصورة بامللف ‪ start.html‬أتبع اآلتي‪:‬‬

‫‪ -1‬مننن ننصف املتصننف ‪،Google Chrome‬‬

‫أسن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر امللن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪library/CSS/start.html‬‬

‫‪ -2‬أقوم بضغط زر الفأرة األيمن على‬

‫الصورة‪ ،‬ومن القائمة املنبثقة أ تار‬
‫‪. inspect element‬‬

‫‪ -3‬سيظهر تبويب أسفل يمين الشاشة‬

‫يحتوي تنسيقات ‪ Css‬املطبقة على‬
‫الصورة‪ ،‬وهي كاآلتي‪:‬‬

‫‪ -‬عر الصورة ‪ 333‬بكسل‬

‫‪ -‬ارتفاع الصورة ‪ 253‬بكسل‪،‬‬
‫‪ -‬يحيط بها إطار بسمك ‪ 4‬بكسل ‪ ،‬وغير‬
‫متقطع واللون ‪.greenyellow‬‬

‫‪3‬‬

‫‪1‬‬ ‫‪42‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق الصور‬

‫ولتنسيق الصورة املوجودة في ملف‬

‫ً‬
‫‪ Index.html‬وجب علي أوال أن أدرج التنسيقات‬
‫املطلوبة على الصورة في امللف‬
‫‪ ، formatting.css‬ولعمل ذلك أتبع اآلتي‪:‬‬

‫‪ -1‬مننن ننصف برنننام ‪ ، Flash Develop‬أفننت‬

‫امللف ‪library/CSS/formatting.css‬‬

‫‪2‬‬ ‫‪ -2‬أدرج العصمن ن ننة ‪ img‬وأضن ن ننيف التنسن ن ننيقات‬

‫اآلتية ‪:‬‬
‫‪img‬‬
‫{‬
‫;‪Width:300px‬‬
‫أح ن نندد ع ن ننر الص ن ننورة باس ن ننتخدام ا اص ن ننية‬
‫‪ width‬وأكتب ‪ 333‬بكسل‬

‫;‪Height:250px‬‬
‫أح ن نندد ارتف ن نناع الص ن ننورة باس ن ننتخدام ا اص ن ننية‬
‫‪ height‬وأكتب‪253‬بكسل‬

‫;‪border: 4px solid greenyellow‬‬

‫وإلضننافة إطننار إّننى ّ‬
‫الصننورة أس ننتخدم ا اصننية‬
‫‪ ، border‬والتي تأ ذ ثصث قيم‪ ،‬وهي‪:‬‬
‫سمك االطار‪ ،‬أكتب ‪4‬‬
‫‪ ‬القيمة األولى‪ :‬خاصة ب ُ‬
‫بكسل‪.‬‬

‫‪2‬‬ ‫‪43‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق الصور‬
‫والقيمة الثانية‪ :‬خاصة بنمط اإلطار‪ ،‬وله أنماط‬ ‫‪‬‬

‫عدة مثل‪ :‬غير متقطع ‪ – solid‬ومزدوج‬

‫‪ double‬وغيرها من األنماط‪ .‬احدد النمط غير‬
‫المتقطع ‪. solid‬‬
‫القيمة الثالثة‪ :‬خاصة بلون اإلطار‪ ،‬وأكتب اللون‬ ‫‪‬‬

‫‪greenyellow‬‬

‫}‬
‫لتكون ا جملة النهائية لتنسيق الصورة كاآلتي‪:‬‬

‫‪img‬‬
‫{‬
‫;‪Width:300px‬‬
‫;‪Height:250px‬‬
‫;‪border: 4px solid greenyellow‬‬
‫}‬

‫مصحظة ‪:‬‬
‫يمكننا البدء بأي قيمة سواء كانت اللون أو‬
‫النمط او ُ‬
‫السمك‪.‬‬

‫‪ -3‬أحفظ امللف‪.‬‬

‫‪ -4‬من صف املتصف ‪،Google Chrome‬‬

‫أستعر امللف ‪library/CSS/Index.html‬‬

‫‪3‬‬ ‫‪44‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق الصور‬

‫‪ -5‬أالحننظ إضننافة إطننار سننميك‪ ،‬غي نر متقطننع‪،‬‬

‫ب ن ن ن نناللون ‪ greenyellow‬ح ن ن ن ننوف الص ن ن ن ننورة‪،‬‬
‫وتغيير ارتفاع الصورة وعرضها‪.‬‬

‫تنبيه‪:‬‬
‫‪ ‬ليتم تنسيق مكونات الصفحة‬
‫‪ Index.html‬وذلك طبقا للتنسيقات التي‬
‫ملف‬ ‫دا ل‬ ‫بإدراجها‬ ‫قمت‬
‫‪ ،Formatting.Css‬يجب علي أوال ربط‬
‫بامللف‬ ‫‪formatting.css‬‬ ‫ملف‬
‫‪ index.html‬وذلك بالكيفية التي تم‬
‫شرحها في ا جزء ا اص ‪External Style‬‬
‫‪5‬‬
‫‪.Sheet‬‬

‫عند استعرا الصفحة ‪Index.html‬‬ ‫‪‬‬

‫سوف يتم تطبيق جميع التنسيقات املدرجة‬

‫في امللف ‪ ( formatting.Css‬إن وجدت )‬
‫وليس فقط ما قمت بإدراجه هنا ‪.‬‬

‫‪4‬‬ ‫‪45‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق لون خلفية الصفحة‬ ‫األول‬
‫الثانوي‬

‫‪2‬‬
‫تعد خلفية الصفحات واأللوان من األمور التي‬
‫لها أكبر األثر في جذب الزوار إلى املوقع‪،‬‬
‫وللتعرف على تنسيق خلفية الصفحة بامللف‬
‫‪ start.html‬أتبع اآلتي‪:‬‬

‫‪ .1‬م ننن خن ن املتص ننف ‪،Google Chrome‬‬

‫أ س ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر املل ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪library/CSS/start.html‬‬

‫‪ .2‬أضن ّزر الفننةر األيمننن علننى الصننفحة ومننن‬

‫القائمننة املثقةقننة أختننار ‪inspect element‬‬
‫‪.‬‬

‫‪ .3‬سيظهر تبوين أسنف يمن ن الشاشنة يحتنو‬

‫تنسيقات ‪ Css‬املطبقة على خلفية الصفحة‬
‫وهي كاآلتي‪:‬‬

‫‪ -‬لون خلفية الصفحة اللون ‪. azure‬‬

‫‪3‬‬
‫‪1‬‬ ‫‪46‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق لون خلفية الصفحة‬

‫ولتنسيق خلفية الصفحة في امللف‬

‫‪ Index.html‬وج علي أوال أن أدرج التنسيق‬
‫املطلوب في امللف ‪ ، formatting.css‬ولعم‬
‫ذلك أتبع اآلتي‪:‬‬

‫‪ -1‬م ن ننن خن ن ن برن ن ننام ‪،Flash Develop‬‬

‫أس ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر املل ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪library/CSS/formatting.css‬‬

‫‪2‬‬ ‫‪ -2‬أدرج الع من ننة ‪ body‬وأضن ننيف التنسن ننيقات‬

‫اآلتية ‪:‬‬

‫‪body‬‬
‫{‬
‫;‪Background-color: azure‬‬
‫}‬
‫لت ي ر لون خلفية الصفحة أستخدم الخاصية‬
‫‪ background-color‬وأختار اللون ‪azure‬‬

‫‪ -3‬أحفظ امللف‪.‬‬

‫‪2‬‬ ‫‪47‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق لون خلفية الصفحة‬
‫‪5‬‬
‫‪ -3‬مننن خ ن املتصننف ‪.Google Chrome‬‬
‫أ س ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر املل ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪library/CSS/Index.html‬‬

‫‪ -4‬أالح ن ننظ ت ي ن ننر ل ن ننون خلفي ن ننة الص ن ننفحة إل ن ننى‬

‫اللون املحدد‪.‬‬

‫تثقيه‪:‬‬
‫‪ ‬ليتم تنسيق مكونات الصفحة‬
‫‪ Index.html‬وذلك طبقا للتنسيقات التي‬
‫ملف‬ ‫داخ‬ ‫بإدراجها‬ ‫قمت‬
‫‪ ،Formatting.Css‬يج علي أوال رب‬
‫بامللف‬ ‫‪formatting.css‬‬ ‫ملف‬
‫‪ index.html‬وذلك بالكيفية التي تم‬
‫شرحها في الجزء الخاص ‪External Style‬‬
‫‪.Sheet‬‬

‫عثد استعرا الصفحة ‪Index.html‬‬ ‫‪‬‬

‫سوف يتم تطبيق جميع التنسيقات املدرجة‬

‫في امللف ‪ ( formatting.Css‬إن وجدت )‬
‫وليس فق ما قمت بإدراجه هثا ‪.‬‬

‫‪3‬‬ ‫‪48‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق االرتباط التشعيب‬ ‫األول‬
‫الثانوي‬

‫تعد االرتباطات التشعبية من العناصر‬

‫األساسية التي توجد داخل صفحات اإلنترنت‬
‫والتي تنقلنا من صفحة إلى أخرى‪ ،‬أو من مقطع‬
‫ّ‬
‫وللتعرف على‬ ‫إلى مقطع‪ ،‬ضمن نفس الصفحة‪.‬‬
‫تنسيقات االرتباط التشعبي املوجود في صفحة‬
‫‪ start.html‬أتبع اآلتي‪:‬‬

‫‪ -1‬من خالل املتصفح ‪،Google Chrome‬‬

‫امللف‬ ‫أستعرض‬
‫‪library/CSS/start.html‬‬

‫‪ -2‬أقوم بضغط زر الفأرة األيمن على النص‬

‫‪ CLICK HERE TO START‬املضاف له‬
‫‪inspect‬‬ ‫ارتباط تشعبي‪ ،‬وأختار‬
‫‪2‬‬ ‫‪ element‬من القائمة املنبثقة‪.‬‬

‫‪ -3‬سيظهر تبويب أسفل يمين الشاشة‬

‫يحتوي تنسيقات ‪ Css‬املطبقة على‬
‫االرتباط التشعبي ‪ ،‬وهي كاآلتي‪:‬‬

‫‪ -‬لون الخط باللون االسود‪.‬‬

‫‪ُ -‬سمك الخط بـ ‪. bold‬‬
‫‪ -‬حجم الخط ‪ 02‬بيكسل‪.‬‬

‫‪3‬‬

‫‪1‬‬ ‫‪49‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق االرتباط التشعيب‬

‫ولتنسيق االرتباط التشعبي املوجود في امللف‬

‫ً‬
‫‪ ،index.html‬وجب علي أوال أن أدرج تلك‬
‫التنسيقات في امللف ‪ ،formatting.css‬ولعمل‬
‫ذلك أتبع اآلتي‪:‬‬

‫‪ -1‬من خالل برنامج ‪ ،Flash Develop‬أفتح‬

‫امللف ‪library/CSS/formatting.css‬‬

‫‪ -2‬أدرج العالمة ‪ a‬وأضيف التنسيقات اآلتية‪:‬‬

‫‪a‬‬
‫{‬
‫;‪Color: black‬‬
‫لتغييـ ــر لـ ــون الـ ــنص اسـ ــتلدم الخاصـ ــية ‪color‬‬
‫واكتب اللون االسود ‪.black‬‬

‫;‪font-weight: bold‬‬

‫ولتغيــر ُســمك الخــط اســتلدم الخاصــية ‪Font-‬‬

‫‪ weight‬واكتب ‪.bold‬‬

‫;‪font-size: 20px‬‬
‫‪2‬‬ ‫لتغيي ــر حج ــم الخ ــط اس ــتلدم الخاص ــية ‪font-‬‬
‫‪ size‬واكتب ‪ 22‬بكسل‪.‬‬
‫}‬

‫‪2‬‬ ‫‪50‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق االرتباط التشعيب‬

‫لتكـ ـ ـ ــون الجملـ ـ ـ ــة ال ائيـ ـ ـ ــة لتنسـ ـ ـ ــيق االرتبـ ـ ـ ــاط‬
‫التشعبي كاآلتي‪:‬‬
‫‪a‬‬
‫{‬
‫;‪Color: black‬‬
‫;‪font-weight: bold‬‬
‫;‪font-size: 20px‬‬
‫}‬

‫‪ -3‬أحفظ امللف ‪.‬‬

‫‪ -4‬مـ ــن خـ ــالل املتصـ ــفح ‪.Google Chrome‬‬

‫أ س ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــتعرض الص ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــفحة‬
‫‪library/CSS/index.html‬‬

‫‪ -2‬أالحـ ـ ــظ إضـ ـ ــافة التنسـ ـ ــيقات إلـ ـ ــى االرتبـ ـ ــاط‬
‫التشعبي‪.‬‬

‫‪5‬‬

‫‪3‬‬ ‫‪51‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق االرتباط التشعيب‬

‫تنبيه‪:‬‬
‫‪ ‬ليتم تنسيق مكونات الصفحة‬
‫‪ Index.html‬وذلك طبقا للتنسيقات التي‬
‫ملف‬ ‫داخل‬ ‫بإدراجها‬ ‫قمت‬
‫‪ ،Formatting.Css‬يجب علي أوال ربط‬
‫بامللف‬ ‫‪formatting.css‬‬ ‫ملف‬
‫‪ index.html‬وذلك بالكيفية التي تم‬
‫شرحها في الجزء الخاص ‪External Style‬‬
‫‪.Sheet‬‬

‫عند استعراض الصفحة ‪Index.html‬‬ ‫‪‬‬

‫سوف يتم تطبيق جميع التنسيقات املدرجة‬

‫في امللف ‪ ( formatting.Css‬إن وجدت )‬
‫وليس فقط ما قمت بإدراجه هنا ‪.‬‬

‫‪4‬‬ ‫‪52‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق حاالت االرتباط التشعيب‬ ‫األول‬
‫الثانوي‬

‫نريد هنا أن يتغير لون االرتباط التشعبي‬

‫املوجود بالصفحة ‪ index.html‬عند مرور‬
‫مؤشر الفأرة عليه الى اللون األحمر مثال‪ ،‬وأن‬
‫يتغير لون االرتباط التشعبي الذي تم زيارته إلى‬
‫اللون األصفر‪.‬‬

‫ولتنسيق حاالت االرتباط التشعبي املوجود في‬

‫ً‬
‫امللف ‪ index.html‬وجب علي أوال أن أدرج‬
‫امللف‬ ‫في‬ ‫املطلوبة‬ ‫التنسيقات‬
‫‪ ،formatting.css‬ولعمل ذلك أتبع االتي‪:‬‬

‫‪ -1‬من الننال برننام ‪ ،Flash Develop‬أفننت‬

‫امللف ‪library/CSS/formatting.css‬‬

‫‪2‬‬
‫‪ -2‬أدرج عالمن ن ننة ‪ a‬جدين ن نندة وأضن ن ننيف عن ن نندها‬
‫الخاصن ن ننية ‪ hover‬التن ن نني تحن ن نندد من ن ننا الن ن ننذي‬
‫يحن ن نندط لالرتبن ن نناط التشن ن ننعبي عنن ن نند من ن ننرور‬
‫مؤشر الفأرة عليه‬
‫‪a:hover‬‬
‫{‬
‫;‪Color:red‬‬
‫}‬

‫لتغييننر لننون االرتبنناط سننتصدة الخاصننية ‪color‬‬

‫ونكتب اللون األحمر ‪red‬‬

‫‪1‬‬ ‫‪53‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق حاالت االرتباط التشعيب‬

‫‪ -3‬أحفظ امللف‪.‬‬

‫‪ -4‬م ن الننال املتصننف ‪،Google Chrome‬‬

‫أ سن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر امللن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪library/CSS/index.html‬‬

‫‪ -5‬أالحننظ كيننف يتغيننر لننون االرتبنناط التشننعبي‬

‫عند مرور مؤشر الفأرة فوقه‪.‬‬

‫‪ -6‬وإلض ن ننافة تنس ن ننيق إل ن ننى االرتب ن نناط التش ن ننعبي‬

‫الذي تمت زيارته‪:‬‬

‫‪ -7‬من النال برننام ‪ ، Flash Develop‬أفنت‬

‫‪5‬‬ ‫امللف ‪library/CSS/Formatting.css‬‬

‫‪ -8‬أدرج عالم ننة ‪ a‬جدي نندة وأض ننيف ع نندها‬

‫الخاص ن ننية ‪ visited‬الت ن نني تح ن نندد م ن ننا ال ن ننذي‬
‫يحدط لالرتباط التشنعبي عند النقنر علينه‬
‫بالفأره واالنتهاء م زيارته‪:‬‬
‫‪a:visited‬‬
‫{‬
‫;‪Color :yellow‬‬
‫}‬
‫‪8‬‬ ‫لتغييننر لننون االرتبنناط اسننتصدة الخاصننية ‪color‬‬
‫واكتب اللون االصفر ‪yellow‬‬

‫‪2‬‬ ‫‪54‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق حاالت االرتباط التشعيب‬

‫‪ -9‬أحفظ امللف‪.‬‬

‫‪ -11‬م الال املتصف ‪.Google Chrome‬‬

‫أ سن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر امللن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪library/CSS/index.html‬‬

‫‪ -11‬أالحن ن ن ننظ كين ن ن ننف يتغين ن ن ننر لن ن ن ننون االرتبن ن ن نناط‬

‫التشعبي عند نقره أو زيارته‪.‬‬

‫تنبيه‪:‬‬
‫‪ ‬ليتم تنسيق مكونات الصفحة‬
‫‪ Index.html‬وذلك طبقا للتنسيقات التي‬
‫ملف‬ ‫داالل‬ ‫بإدراجها‬ ‫قمت‬
‫‪ ،Formatting.Css‬يجب علي أوال ربط‬
‫بامللف‬ ‫‪formatting.css‬‬ ‫ملف‬
‫‪ index.html‬وذلك بالكيفية التي تم‬
‫شرحها في الجزء الخاص ‪External Style‬‬
‫‪.Sheet‬‬

‫‪11‬‬ ‫عند استعرا الصفحة ‪Index.html‬‬ ‫‪‬‬

‫سوف يتم تطبيق جميع التنسيقات املدرجة‬

‫في امللف ‪ ( formatting.Css‬إن وجدت )‬
‫وليس فقط ما قمت بإدراجه هنا ‪.‬‬

‫‪3‬‬ ‫‪55‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق اجلدول‬ ‫األول‬
‫الثانوي‬

‫تستخدم الجداول عادة لتنظيم وترتيب‬

‫البيانات‪ ،‬بحيث يسهل على املستخدم االطالع‬
‫تعرف على تنسيقات حدود الجدول‬ ‫عليها‪ .‬ولل ّ‬
‫املوجود بالصفحة ‪ start.html‬أتبع اآلتي‪:‬‬

‫‪ -1‬م ننل ا ننالل املتص ننف ‪،Google Chrome‬‬

‫أس ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر املل ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن‬
‫‪library/CSS/start.html‬‬

‫‪ -2‬أقوم بضغط زر الفأرة األيمل على حدود‬

‫الجدول ‪ ،‬ومل القائمة املنبثقة أاتار‬
‫‪. inspect element‬‬
‫‪2‬‬

‫‪ -3‬سيظهر تبويب أسفل يمين الشاشة‬

‫يحتوي على تنسيقات ‪ Css‬املطبقة على‬
‫حدود الجدول‪ ،‬وهي كما يأتي‪:‬‬

‫بسمك مقداره ‪ 1‬بكسل ‪ ،‬غير‬ ‫‪ -‬إطار ُ‬

‫متقطع ‪.‬‬
‫‪ -‬محاذاة البيانات ‪ :‬توسيط ‪.‬‬
‫‪ -‬عر الجدول ‪ 054‬بكسل‪.‬‬

‫‪3‬‬

‫‪1‬‬ ‫‪56‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق اجلدول‬

‫و لتنسيق حدود الجدول املوجود في مل‬

‫ً‬
‫‪ index.html‬وجب علي أوال أن أدرج‬
‫املل‬ ‫في‬ ‫املطلوبة‬ ‫التنسيقات‬
‫‪ ،formatting.css‬ولعمل ذلك أتبع اآلتي‪:‬‬

‫‪ -1‬أفننت مننل اننالل برنننام ‪،Flash Develop‬‬

‫املل ‪library/CSS/formatting.css‬‬

‫‪ -2‬أدرج العالمن ن ننة ‪ table‬وأض ن ن نني التنسن ن ننيقات‬

‫اآلتية‪:‬‬
‫‪table‬‬
‫{‬
‫;‪border:1px solid‬‬
‫أس ن ننتخدم ال ا ن ننية ‪ border‬إلض ن ننافة اإلط ن ننار‬
‫لح ن ن نندود الج ن ن نندول ‪ ،‬وأح ن ن نندد ُس ن ن ننمك اإلط ن ن ننار بن ن ن ن‬
‫‪2‬‬ ‫‪1‬بكسل‪ ،‬والنمط بن غير متقطع‪.‬‬

‫;‪width:450px‬‬

‫أحدد عر الجدول بن ‪ 054‬بكسل‪.‬‬

‫‪2‬‬ ‫‪57‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق اجلدول‬

‫لتكون الجملة النهائية لتنسيق حدود الجدول‬

‫كاآلتي‪:‬‬

‫‪table‬‬

‫{‬

‫;‪border:1px solid‬‬

‫;‪width:450px‬‬

‫}‬

‫‪ -3‬أحفظ املل ‪.‬‬

‫‪ -0‬م ننل ا ننالل املتص ننف ‪،Google Chrome‬‬

‫أ سن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر املل ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن‬
‫‪library/CSS/index.html‬‬

‫‪ -5‬أالح ن ن ن إض ن ن ننافة اإلط ن ن ننار ح ن ن ننول الج ن ن نندول‪،‬‬

‫وتغيير‬
‫محاذاة البيانات وعرضه‪.‬‬

‫‪5‬‬

‫‪3‬‬ ‫‪58‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق اجلدول‬

‫تنبيه‪:‬‬
‫‪ ‬ليتم تنسيق مكونات الصفحة‬
‫‪ Index.html‬وذلك طبقا للتنسيقات التي‬
‫مل‬ ‫داال‬ ‫بإدراجها‬ ‫قمت‬
‫‪ ،Formatting.Css‬يجب علي أوال ربط‬
‫باملل‬ ‫‪formatting.css‬‬ ‫مل‬
‫‪ index.html‬وذلك بالكيفية التي تم‬
‫شرحها في الجزء ال اص ‪External Style‬‬
‫‪.Sheet‬‬

‫عند استعرا الصفحة ‪Index.html‬‬ ‫‪‬‬

‫سوف يتم تطبيق جميع التنسيقات املدرجة‬

‫في املل ‪ ( formatting.Css‬إن وجدت )‬
‫وليس فقط ما قمت بإدراجه هنا ‪.‬‬

‫‪4‬‬ ‫‪59‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق صف عنوان اجلدول‬ ‫األول‬
‫الثانوي‬

‫يعتبر صف عنوان الجدول بمثابة الدليل الذي‬

‫يوضح نوعية البيانات في كل عمود‪ ،‬وعلى ذلك‬
‫فإن تنسيق صف العناوين من التنسيقات‬
‫تعرف على تنسيق صف عنوان‬ ‫الضرورية‪ .‬ولل ّ‬
‫الجدول املوجود بالصفحة ‪ start.html‬أتبع‬
‫اآلتي‪:‬‬
‫‪ -1‬مننن ننصل املتصننف ‪،Google Chrome‬‬
‫أسن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر امللن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪library/CSS/start.html‬‬

‫‪ -2‬أقوم بضغط زر الفأرة األيمن على صف‬

‫العنوان‪ ،‬ومن القائمة املنبثقة أ تار‬
‫‪2‬‬
‫‪. inspect element‬‬

‫‪ -3‬سيظهر تبويب أسفل يمين الشاشة‬

‫يحتوي تنسيقات ‪ Css‬املطبقة على صف‬
‫العنوان ‪ ،‬وهي كاآلتي‪:‬‬

‫بسمك مقداره ‪3‬بكسل‪ ،‬غير‬ ‫‪ -‬إطار ُ‬

‫متقطع‪ ،‬واللون أبيض‪.‬‬
‫‪ -‬لون التعبئة لخصيا صف العنوان هو‬
‫‪.blueviolet‬‬
‫‪ -‬محاذاة النص ‪ :‬توسيط‪.‬‬
‫‪ -‬ولون النص ‪ :‬أبيض ‪.‬‬
‫‪ -‬حجم النص ‪ 22 :‬بكسل‪.‬‬
‫‪3‬‬

‫‪1‬‬ ‫‪60‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق صف عنوان اجلدول‬

‫ولتنسيق صف عنوان الجدول املوجود في ملف‬

‫ً‬
‫‪ index.html‬وجب علي أوال أن أدرج التنسيقات‬
‫املطلوبة في امللف ‪ ،formatting.css‬ولعمل‬
‫ذلك أتبع اآلتي‪:‬‬

‫‪ -1‬مننن ننصل برنننام ‪ ،Flash Develop‬أفننت‬

‫امللف ‪library/CSS/formatting.css‬‬

‫‪ -2‬أدرج العصمن ن ن ن ننة ‪ th‬وأضن ن ن ن ننيف التنسن ن ن ن ننيقات‬

‫اآلتية‪:‬‬
‫‪th‬‬
‫{‬
‫;‪border:3px solid red‬‬
‫إلضافة إطار صف العننوان أسنتددم الخاصنية‬
‫‪ ،border‬وأح نندد ُس ننمك اإلط ننار ب ن ن ‪ 3‬بكس ننل‪،‬‬
‫والنمط بن غير متقطع‪ ،‬واللون بنأبيض‪.‬‬
‫‪2‬‬ ‫;‪background-color: blueviolet‬‬

‫لتغيير لون لفية صف العنوان أستددم‬

‫الخاصية ‪ background-color‬وأكتب اللون‬
‫‪.blueviolet‬‬

‫‪2‬‬ ‫‪61‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق صف عنوان اجلدول‬

‫;‪color: white‬‬
‫لتغيير لون النص أستددم الخاصية ‪color‬‬
‫وأكتب اللون األبيض ‪. white‬‬

‫;‪font-size: 20px‬‬

‫لتغيير حجم الخط أستددم الخاصية ‪font-‬‬

‫‪ size‬وأكتب ‪ 22‬بكسل‪.‬‬
‫}‬
‫لتك ننون الجمل ننة السيائي ننة لتنس ننيق ص ننف عنن ننوان‬
‫الجدول كاآلتي‪:‬‬
‫‪th‬‬

‫{‬

‫;‪border:3px solid red‬‬

‫;‪background-color: blueviolet‬‬
‫;‪color: white‬‬
‫;‪font-size: 20px‬‬
‫}‬
‫‪ -3‬أحفظ امللف ‪.‬‬
‫‪ -4‬م ننن ننصل املتص ننف ‪،Google Chrome‬‬
‫أ س ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر املل ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننف‬
‫‪5‬‬
‫‪library/CSS/index.html‬‬
‫‪ -5‬أالحننظ التنسننيقات الأننت أضننيف إلننى صننف‬
‫عنوان الجدول‪.‬‬

‫‪3‬‬ ‫‪62‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق صف عنوان اجلدول‬

‫مصحظة ‪:‬‬
‫يمك ننن تطبي ننق نف ننا التنس ننيقات الس ننابقة عل ننى‬
‫‪7‬‬
‫ب نناالي صي ننا الج نندول‪ ،‬وذل ننك ع ننن طري ننق إض ننافة‬
‫العصمة ‪ td‬بعد العصمنة ‪ th‬دا نل ملنف ال ن ‪Css‬‬
‫على النحو اآلتي‪:‬‬

‫‪ -6‬مننن ننصل برنننام ‪ ،Flash Develop‬أفننت‬

‫امللف ‪library/CSS/Formatting.Css‬‬

‫‪ -7‬أض ننيف العصم ننة ‪ td‬بعنند العصم ننة ‪ th‬بحي ن‬

‫يفصل بيسيما فاصلة ( ‪.) ,‬‬

‫‪ -8‬أحفظ امللف ‪.‬‬

‫‪ -9‬م ننن ننصل املتص ننف ‪،Google Chrome‬‬

‫أ س ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر الص ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننفحة‬
‫‪library/CSS/index.html‬‬

‫‪ -12‬أالحظ التنسيقات الأنت أضنيف إلنى بناالي‬

‫صيا الجدول‪.‬‬

‫‪11‬‬

‫‪4‬‬ ‫‪63‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق صف عنوان اجلدول‬

‫تنبيه‪:‬‬
‫‪ ‬ليتم تنسيق مكونات الصفحة‬
‫‪ Index.html‬وذلك طبقا للتنسيقات الأت‬
‫ملف‬ ‫دا ل‬ ‫بإدراجها‬ ‫قم‬
‫‪ ،Formatting.Css‬يجب علي أوال ربط‬
‫بامللف‬ ‫‪formatting.css‬‬ ‫ملف‬
‫‪ index.html‬وذلك بالكيفية التي تم‬
‫شرحها في الجزء الخاص ‪External Style‬‬
‫‪.Sheet‬‬

‫عند استعرا الصفحة ‪Index.html‬‬ ‫‪‬‬

‫سوف يتم تطبيق جميع التنسيقات املدرجة‬

‫في امللف ‪ ( formatting.Css‬إن وجدت )‬
‫وليا فقط ما قم بإدراجه هنا ‪.‬‬

‫‪5‬‬ ‫‪64‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق خاليا اجلداول‬ ‫األول‬
‫الثانوي‬

‫تعد خاليا الجدول هي الوعاء الحقيقي ملحتوى‬

‫البيانات‪ ،‬وللتعرف على تنسيقات خاليا‬
‫الجدول املوجود بالصفحة ‪ start.html‬أتبع‬
‫اآلتي‪:‬‬

‫‪ -1‬م ننال خ ننالل املتص ننف ‪،Google Chrome‬‬

‫أسن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننتعر املل ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن‬
‫‪library/CSS/start.html‬‬

‫‪ -2‬ألقوم بضغط زر الفأرة األيمال على أحد‬

‫خاليا الجدول‪ ،‬ومال القائمة املنبثقة‬
‫وأختار ‪. inspect element‬‬

‫‪2‬‬

‫‪ -3‬سيظهر تبويب أسفل يمين الشاشة‬

‫يحتوي تنسيقات ‪ Css‬املطبقة على خاليا‬
‫الجدول ‪ ،‬وهي كاآلتي‪:‬‬
‫بسمك مقداره (‪ )1‬بكسل‪ ،‬غير‬ ‫‪ -‬إطار ُ‬
‫متقطع ‪ ،‬وبلون أسود ‪.‬‬
‫‪ -‬املسافة الفاصلة بين النص وحدود‬
‫الخلية الداخلية بمقدار ‪ 22‬بكسل ‪.‬‬
‫‪ -‬وحجم الخط مقداره ‪11‬بكسل‪.‬‬
‫‪ -‬محاذاة البيانات ‪ :‬توسيط‪.‬‬
‫‪3‬‬

‫‪1‬‬ ‫‪65‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق خاليا اجلداول‬

‫ولتنسيق خاليا الجدول املوجود في املل‬

‫ً‬
‫‪ index.html‬وجب علي أوال أن أدرج‬
‫املل‬ ‫في‬ ‫املطلوبة‬ ‫التنسيقات‬
‫‪ ،formatting.css‬ولعمل ذلك أتبع اآلتي‪:‬‬

‫‪ -1‬مننال خننالل برنننام ‪ ،Flash Develop‬أفننت‬

‫املل ‪library/CSS/formatting.css‬‬

‫‪ -2‬أدرج العالم ن ن ن ننة ‪ td‬وأض ن ن ن نني التنس ن ن ن ننيقات‬

‫التالية‪:‬‬

‫‪td‬‬
‫{‬
‫;‪border:1px solid black‬‬
‫إلضن ن ننافة إطن ن ننار إلن ن ننى خالين ن ننا الجن ن نندول أسن ن ننت دم‬
‫الخاص ننية ‪ ، border‬وأح نندد ُس ننمك اإلط ننار ب ن ن‬
‫‪1‬بكسل‪ ،‬والنمط بنغير متقطع‪ ،‬واللون بن أسود‪.‬‬

‫;‪Padding:20px‬‬

‫‪2‬‬ ‫لعمنل مسنافة فاصننلة بنين النننص وحندود الخليننة‬

‫الداخليننة أسننت دم الخاصننية ‪ padding‬وأكتننب‬
‫‪ 22‬بكسل‪.‬‬

‫;‪font-size:15px‬‬
‫لتغيين ن ن ننر حج ن ن ن ننم الخن ن ن ننط أس ن ن ن ننت دم الخاص ن ن ن ننية‬
‫‪ font-size‬وأكتب ‪ 11‬بكسل‪.‬‬

‫‪2‬‬ ‫‪66‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق خاليا اجلداول‬

‫;‪text-align: center‬‬
‫ملحنناذاة النننص أسننت دم الخاصننية ‪text-align‬‬
‫وأكتب توسيط ‪.center‬‬

‫}‬
‫لتكننون الجملننة اليةائيننة لتنسننيق خاليننا الجنندول‬
‫كاآلتي‪:‬‬
‫‪td‬‬
‫{‬
‫;‪border:1px solid black‬‬
‫;‪Padding:20px‬‬
‫;‪font-size:15px‬‬
‫;‪text-align: center‬‬
‫}‬
‫‪ -3‬أحفظ املل ‪.‬‬

‫‪ -4‬مننال خننالل املتصننف ‪.Google Chrome‬‬

‫أستعر املل ‪.index.html‬‬

‫‪ -1‬أالحن ن ن ننظ التنسن ن ن ننيقات ال ن ن ن ن أضن ن ن ننيف إلن ن ن ننى‬

‫الجدول‪.‬‬
‫‪5‬‬

‫‪3‬‬ ‫‪67‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق خاليا اجلداول‬

‫تنبيه‪:‬‬
‫‪ ‬ليتم تنسيق مكونات الصفحة‬
‫‪ Index.html‬وذلك طبقا للتنسيقات ال‬
‫مل‬ ‫داخل‬ ‫بإدراجها‬ ‫قم‬
‫‪ ،Formatting.Css‬يجب علي أوال ربط‬
‫باملل‬ ‫‪formatting.css‬‬ ‫مل‬
‫‪ index.html‬وذلك بالكيفية التي تم‬
‫شرحها في الجزء الخاص ‪External Style‬‬
‫‪.Sheet‬‬

‫عند استعرا الصفحة ‪Index.html‬‬ ‫‪‬‬

‫سوف يتم تطبيق جميع التنسيقات املدرجة‬

‫في املل ‪ ( formatting.Css‬إن وجدت )‬
‫وليس فقط ما قم بإدراجه هنا ‪.‬‬

‫‪4‬‬ ‫‪68‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪container‬‬ ‫األول‬
‫الثانوي‬

‫قد تحتوي صفحح إلنترنتفع ى فل إليدد فد‬

‫مففمل إلطع ف األ زا إلال فقإل إلييففي قففد تحففوي ت ف‬
‫إىالتف ف ص ففو زا غي ففن يف ف اإليي ففي م ففمل ف ف نه‬
‫ف ف ف ى ف ففل‬ ‫ففف‬ ‫تنظف ف ف اتيتن ف ففي إلي تف ف ف‬
‫إلط ففتتدف تا ففح إلطوق ففأل اي ففد ن منف ف م ف ف‬
‫‪ managebooks.html‬إليف ففوي ج ف ف حوي ل ف ففأل‬
‫إلطع األ دإلخ ه‬
‫ج ف ف ف ف دز ت ف ف ف ف إلطع ف ف ف ففأل ‪container‬‬
‫إلطولف ففو ف ف ط ايكف ففمل ىوت ف ف زا ن ف ففتدي‬
‫إليت ف ف ع إليي ففي ك ففمل إضف ف له ي ففوي إلطع ففأل‬
‫ا ي ف ف ج ف ففتتدإلف إلط ف ف ‪ layout.html‬إلي ف ففوي‬
‫ج ف ف ف ف إىف ف ف ففدإل ات ف ف ف ف ل ف ف ف ففأل محتو تف ف ف ففه‬
‫ا جتديإل ت إليت ع تت أل إلآلتي‬

‫‪2‬‬
‫‪ -1‬ممل خالل ‪ Google Chrome‬زجتدي‬
‫إلط ‪library/CSS/layout.html‬‬

‫‪ -2‬زقوف ضغط ز إليح ة إلا مل ى ل إلطع أل‬

‫‪ container‬اممل إليع ئ إلطنبثع زخت‬
‫‪inspect element‬‬

‫‪1‬‬ ‫‪69‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪container‬‬
‫ين إلي‬ ‫‪ -3‬ج ظ ي ت و ي زجح‬
‫حتوي ت ع ‪ Css‬إلط ع ى ل إلطع أل‬
‫‪ container‬اهي ك آلتي‬

‫ىي إلطع أل ‪ 1111‬ك‬ ‫‪-‬‬

‫إل تح ع ‪ 551‬ك‬ ‫‪-‬‬
‫اغين‬ ‫معدإل ‪ 4‬ك‬ ‫إا ُ‬ ‫‪-‬‬
‫متع أل اإلي ون ‪greenyellow‬‬
‫يون إللخ ح ‪lightyellow‬‬ ‫‪-‬‬
‫‪ padding‬عدإل ‪ 11‬ك‬ ‫‪-‬‬
‫م مش عدإل ‪ 11‬ك‬ ‫‪-‬‬

‫إلطع أل ‪ container‬إلطولو في إلط‬ ‫ايت‬

‫‪3‬‬ ‫‪ managebooks.html‬الي ى ي زا زن ز ج‬
‫إلط‬ ‫في‬ ‫إلط وب‬ ‫إليت ع‬
‫‪ Formatting.css‬ايد ي زت أل إلآلتي‬

‫‪ -1‬مفمل خففالل يتف م ‪ Flash Develop‬ز ففت‬

‫إلط ‪library/CSS/formatting.css‬‬

‫‪2‬‬ ‫‪70‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪container‬‬

‫إليت لي‬ ‫‪ -2‬ز ج إليت‬

‫‪#Container‬‬

‫مالحظة ‪:‬‬
‫زضحن ىالم إلي ش ‪ #‬ق إلطع أل ‪container‬‬
‫ّ‬
‫ي د ي ى ل زته ممل إلينوع ‪ id‬زي زن إليت‬
‫ى ه عط ا ي دكس‬ ‫إليوي حتو ه‬
‫إلجتتدإلمن ي ان ‪class‬‬

‫{‬

‫;‪width :1000px‬‬

‫يتحد د ىي إلطع أل إلجتتدف إللخ ص‬

‫‪2‬‬
‫‪ width‬اإلكتي ‪ 1111‬ك‬

‫;‪height:550px‬‬
‫يتحد د إل تح ع إلطع أل زجتتدف إللخ ص‬
‫‪ height‬ازكتي ‪ 551‬ك‬

‫;‪border :4px solid greenyellow‬‬

‫إا ي ع أل زجتتدف‬ ‫ايتحد د انض‬
‫ازحد إلي ون‬ ‫‪border‬‬ ‫إللخ ص‬
‫اإلين ط ف‬ ‫ف‪4‬ك‬ ‫‪ greenyellow‬اإلي ُ‬
‫غين متع أل‬

‫‪3‬‬ ‫‪71‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪container‬‬

‫;‪background-color: lightyellow‬‬
‫ايتغ ين يون خ ح إلطع أل زجتتدف إللخ ص‬
‫إلي ون‬ ‫ازكتي‬ ‫‪background-color‬‬
‫‪lightyellow‬‬

‫;‪padding:10px‬‬
‫ص ف ف ف ف ف ف ف ف ف ففين محتو ف ف ف ف ف‬ ‫نض ف ف ف ف ف م ف ف ف ف ف‬
‫احف ف ف ف ف ف ف ففدا إلطع ف ف ف ف ف ف ف ففأل إليدإلخ ف ف ف ف ف ف ف ف زجف ف ف ف ف ف ف ففتتدف‬
‫إللخ ص ‪ padding‬ازكتي ‪ 11‬ك‬

‫;‪margin:10px‬‬
‫ث زجتتدف إللخ ص ‪ margin‬نض م مش‬
‫زا (م ح خ ي ) حول إليدناي حا ننه‬
‫ابين إليدن صي إلييي حويه ازكتي ‪ 11‬ك‬

‫إلطع أل‬ ‫يت‬ ‫إلينه ئ‬ ‫يت ون إللج‬

‫‪ container‬ك آلتي‬
‫‪#Container‬‬
‫{‬
‫;‪width :1000px‬‬
‫;‪height:550px‬‬
‫;‪border :4px solid greenyellow‬‬
‫;‪background-color: lightyellow‬‬
‫;‪padding:10px‬‬
‫;‪margin:10px‬‬
‫}‬

‫‪4‬‬ ‫‪72‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪container‬‬

‫‪ -3‬زححظ إلط‬

‫‪ -4‬م ففمل خ ففالل إلطتا ففح ‪Google Chrome‬‬

‫إل جف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ففتدي إلط ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف‬
‫‪library/CSS/managebooks.html‬‬

‫‪ -5‬ز حففظ زتففه ي ف حففدث ّ‬

‫زي ت ف ثين ي ت ف ع‬
‫إلييي ق ن إ إلل إلخ إلط ط إل؟‬
‫اتن ي تيبط م ‪formatting.css‬‬
‫ط ‪managebooks.html‬‬

‫‪6‬‬
‫إلييإل ط إلقوف آلتي‬ ‫انض‬
‫‪ -6‬مفمل خففالل يتف م ‪ Flash Develop‬إل ففت‬
‫إلط ‪. managebooks.html‬‬

‫‪ -7‬ز ج د ففد إليدالمف ف >‪ < head‬ىالمف ف إلي ففيبط‬

‫>‪ <link‬ك تي‬

‫"‪<link rel="stylesheet‬‬
‫إلجتتدف‬ ‫ت‬ ‫ك‬ ‫يتحد د ت ط إلط‬
‫إللخ ص ‪ rel‬اإلكتي ‪stylesheet‬‬

‫‪5‬‬ ‫‪73‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪container‬‬

‫"‪href="formatting.css‬‬

‫‪ Css‬إلجتتدف‬ ‫ام ن م‬ ‫يتحد د إلج‬

‫إللخ ص ‪href‬‬

‫>‪type="text/css"/‬‬
‫ممل إلينوع إلينص ي‬ ‫يتحد د توع م إليت‬
‫إلجتتدف إللخ ص ‪type‬‬
‫ىالم ‪ link‬إلينه ئ ك آلتي‬ ‫يت ون تيك‬

‫‪<link‬‬ ‫"‪rel="stylesheet‬‬
‫"‪href="formatting.css‬‬
‫‪11‬‬
‫>‪type="text/css"/‬‬
‫‪ -8‬زححظ إلط‬

‫‪ -9‬م ففمل خ ففالل إلطتا ففح ‪،Google Chrome‬‬

‫ز جف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ففتدي إلط ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف‬
‫‪library/CSS/managebooks.html‬‬

‫ّ‬
‫‪ -11‬ز ح ف ف ف ف ف ففظ زت ف ف ف ف ف ففه تف ف ف ف ف ف ف ب ف ف ف ف ف ففط إلط ح ف ف ف ف ف ففين‬
‫‪ formatting.Css‬ا‬
‫‪ managebooks.html‬اإ ض ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف ف‬
‫إليت ع إلل إلطع أل‬

‫‪6‬‬ ‫‪74‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع العلوي ‪header‬‬ ‫األول‬
‫الثانوي‬

‫لتنسي املقطع يعملقل اييجوملقطج ييج ملبييلطا مل‬

‫‪managebooks.html‬ملعا ني ي يلملقف مل ي ي ي مل‬
‫قلتنس ي عل ملقلت يكمل إض يهمل ييل لململل يذلكملقطع ييعمل‬
‫‪2‬‬ ‫فذل يكملبلد ييتمللق ملقطا ي مل‪layout.html‬ملقطنس يامل‬
‫مسي ي ييسعلاملف دي ي ييت ق مل اي ي يكملقلتنسي ي ي عل ملأ سي ي ييعمل‬
‫قآل ي‪ :‬مل‬
‫مل‬
‫مل‬ ‫‪ -1‬مهملخاللمل ‪ Google Chrome‬اأدت‬
‫قطا مل‪library/CSS/layout.html‬مل‬

‫‪ -2‬أقج ملبضغط ّملزر ملقلفأرة ملقأل إه ملعلى ملهذقمل‬

‫قطع ع مل ملفمه ملقلعلئإة ملقطنبثعة ملأختلرمل‬
‫‪. inspect element‬‬

‫‪ -3‬د ظه مل سجيب ملأدفل مل إين ملقلشلشةمل‬

‫حتجو مل نس عل مل‪ Css‬ملقط سعةملعلىملقطع عمل‬
‫قل اجوملفهيملكلآل يمل‪:‬‬
‫مل‬ ‫مل‬

‫‪ -‬ع ملقطع عمل‪990‬ملبضسلمل‪.‬‬

‫‪ -‬طلر ملبللاجن مل‪blueviolet‬ا ُ‬
‫ملفبسإك مل‪3‬مل‬
‫بضسلاملفغيرملمتع عمل‪.‬‬
‫‪ -‬خاف ةملبللاجنمل‪springgreen‬‬
‫‪ -‬ملفمحلذقةملقلنصمل جد طمل‪.‬‬
‫‪ -‬قلهجقمشمل‪:‬مل‪5‬ملبضسل مل‬
‫مل‬
‫مل‬
‫‪3‬‬
‫مل‬
‫مل‬
‫‪1‬‬ ‫‪75‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬ ‫مل‬
 ‫تنسيق املقطع العلوي ‪header‬‬

‫فلتنس املقطع عملقل اجو مل ‪ header‬ملقطج ج ملفيمل‬

‫قطا مل ‪ managebooks.html‬ملف ب ملعلي ملأف مل‬
‫أن ملأ رج ملقلتنس عل ملقط اجبة ملفي ملقطا مل‬
‫‪formatting.css‬ملاملفل إلملذلكملأ سعملقآل ي‪ :‬مل‬

‫‪ -1‬م يهملخيياللملب نييلم مل‪Flash Develop‬ملاملأ ييت مل‬

‫قطا مل‪library/CSS/formatting.css‬مل‬

‫ملقلتنسي ي عل مل‬ ‫‪ -2‬أ رجملقلص يين مل ‪bar‬ململفأ ي ي‬

‫قلتلل ة‪:‬‬
‫‪.bar‬‬

‫مالحظة ‪:‬‬
‫نالح ي ي ي(ملقلنع ي ي يةملع‪ .‬ملقلت ي ي يكمل س ي ي ييساملقطع ي ي يعمل‪bar‬مل‬
‫ي ييللملعلي ي يىملأني ي ي ملمي ي يهملقلن ي ييج مل‪class‬ملفذلي ي يكمل ي ي يكمل‬
‫مكلن ي ي يةمل س ي ي يامل اي ي يكملقلتنسي ي ي عل ملعلي ي يىملأ ي ي يرمل‬
‫مي يهملمع ي ييعاأفملعالمي يةملفي ييملنفي ي ملقلجقي ي مل ضي ي مل‬
‫‪ . id‬مل‬
‫‪2‬‬ ‫{‬
‫;‪width: 990px‬‬
‫لتحل لملع ملقطع عملأدتملل ملقلخلص ةمل‬
‫‪width‬مل ملفأ تبمل‪990‬ملبضسل‪ .‬مل‬
‫مل‬
‫مل‬
‫مل‬
‫مل‬

‫مل‬
‫‪2‬‬ ‫‪76‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬ ‫مل‬
 ‫تنسيق املقطع العلوي ‪header‬‬

‫;‪border: blueviolet 3px solid‬‬

‫أدتملل ملقلخلص ةمل ‪border‬ملإل ل ةمل طلرمل لىمل‬
‫حل ملقلاجنمل‪blueviolet‬ملا ُ‬
‫ملفقلسإكمل‬ ‫افأ ّ‬ ‫قطع عمل مل‬
‫‪3‬ملبضسلاملفقلنإطملغيرملمتع ع‪ .‬مل‬

‫;‪background-color: springgreen‬‬

‫لتغ ي يرملل ييجنملخاف يةملقطع يعملأد ييتملل ملقلخلص ي ةمل‬

‫‪background-color‬مل ملفأ تي ي ي ي ي ي ي ي ي ي ي ي ي يبملقلا ي ي ي ي ي ي ي ي ي ي ي ي ييجنمل‬
‫‪ .springgreen‬مل‬

‫;‪text-align: center‬‬
‫لضي ي ي ي ي ي ي ييسطملمحي ي ي ي ي ي ي ييلذقةملقلس لني ي ي ي ي ي ي ييل ملأدي ي ي ي ي ي ي ييتملل مل‬
‫قلخلصي ي ي ي ي ي ي ي ةمل‪ text-align‬ملفأح ي ي ي ي ي ي ي ّيل مل جدي ي ي ي ي ي ي ي طمل‬
‫‪.center‬‬

‫;‪margin: 5px‬‬
‫ثمملأحل ملقلهلمشملبلدتمللق ملقلخلص ةمل‬
‫‪margin‬مل ملفأ تبمل‪5‬ملبضسل‪ .‬مل‬
‫}‬

‫‪3‬‬ ‫‪77‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع العلوي ‪header‬‬

‫لتكجن ملقلجإاة ملقلن لئ ة مللتنس ا ملقلصن مل‪bar‬مل‬

‫كاآلتي‪:‬‬
‫‪.bar‬‬

‫{‬

‫;‪width:990px‬‬

‫;‪border: blueviolet 3px solid‬‬

‫;‪background-color: springgreen‬‬

‫;‪text-align: center‬‬

‫;‪margin: 5px‬‬

‫}‬
‫‪ -3‬أحف(ملقطا مل‪ .‬مل‬
‫‪5‬‬
‫مل‬
‫‪ -4‬مي يهملخي يياللملقطتصي ييف مل‪Google Chrome‬امل‬
‫مل قطاي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي مل‬ ‫أ د ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ييت‬
‫‪ library/CSS/managebooks.html‬مل‬
‫مل‬
‫‪ -5‬أ ح ي ي ي(مل س ي ي ياملقلتنس ي ي ي عل ملعل ي ي يىملقطع ي ي يعمل‬
‫قل اي ييجواملف ي ييذلكملقطع ي يعملقلسي ييفليملف ي ييملنف ي ي مل‬
‫قلجق ي ملامل لطع ييلنمل الهإ يلمل حإ ييالنملق د يممل‬
‫نفس مل‪ .class‬مل‬

‫‪4‬‬ ‫‪78‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع العلوي ‪header‬‬

‫مل‬
‫نب ‪ :‬مل‬
‫ملقلصفحةمل‬ ‫‪ ‬ل تم مل نس ا ملمكجنل‬
‫‪ Managebooks.html‬ملفذلك ملطسعلمل‬
‫لاتنس عل ملقلتكملقإ ملبإ رق هلمل قخلملما مل‬
‫‪Formatting.Css‬ا مل جب ملعلي ملأف ملربطمل‬
‫بلطا ململ‬ ‫مل‪formatting.css‬‬ ‫ما‬
‫‪ Managebooks.html‬وذلك بالكيفية‬
‫التي تم شرحها في ملقلجزء ملقلخلص مل نس امل‬
‫قطع عمل‪.container‬‬
‫ملقلصفحةمل‬ ‫ملقدت ق‬ ‫‪ ‬عنل‬
‫‪ Managebooks.html‬دج مل تم مل س امل‬
‫إ ع ملقلتنس عل ملقطلر ة ملفي ملقطا مل‬
‫‪ formatting.Css‬ع مل ن ملف ل مل ملفلي مل‬
‫عطملململقإ ملبإ رق ملهنلمل‪.‬مل‬
‫مل‬
‫مل‬
‫مل‬

‫‪5‬‬ ‫‪79‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع السفلي ‪Footer‬‬ ‫األول‬
‫الثانوي‬

‫دددد دددد‬ ‫لق د د دده تم تد د د د د د د د د د د د‬

‫التنسد د ق ملق ددس ايق ددس السد د ق ملت دده نسد د‬
‫ايق ددس الي‪ ،‬د أن ات ت د تدده ا د نس د ق‬
‫خد د ملقد ددس ايق د ددس السد د ق لد د ل ستض د د‬
‫‪2‬‬
‫ال د د د د ايي د د د د ‪ id‬ال د د د د أ يحت د د د د أ ملقد د د ددس ملد د د دده‬
‫ددس‬ ‫نسد د ق وتس ددتي ا لد د ت التنسد د ق‬
‫اآلتي‪:‬‬

‫‪ -1‬من خالل ‪Google Chrome‬ن ستي‬

‫اي‪library/CSS/layout.html ،‬‬

‫‪ -2‬ق م بضغط ّزر ال أر األيمن ملقس ايق س‬

‫الس ق ومن الق ئم ايتبثق خت ر‬
‫‪inspect element‬‬

‫تب س ل يمين الش ش‬ ‫ه‬ ‫‪ -3‬س‬

‫أ نس ق ‪ Css‬اي ق ملقس ايق س‬ ‫يحت‬
‫ق وه ك آلتي ‪:‬‬ ‫الس‬
‫مل ايق س ‪ 999‬بكسل‬ ‫‪-‬‬
‫وار ع بمقهار ‪ 09‬بكسل‬ ‫‪-‬‬
‫بسم مقهارت ‪ 3‬بكسل وغير‬ ‫اط ر ُ‬ ‫‪-‬‬
‫متق س ول اب ض‬
‫ول ن تي ئ ‪blueviolet‬‬ ‫‪-‬‬
‫وايق س م اليس ر‬ ‫‪-‬‬
‫اله امش ‪ 5 :‬بكسل‬ ‫‪-‬‬

‫‪3‬‬

‫‪1‬‬ ‫‪80‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع السفلي ‪Footer‬‬

‫ولتنس ايق س الس ق ‪ Footer‬اي ج د ف‬

‫ً‬
‫اي‪ managebook.html ،‬وجب ملق وت ن‬
‫اي ‪ ،‬ب ف اي‪،‬‬ ‫درج التنس ق‬
‫‪ formatting.css‬ن وليمل ذل س اآلتي‪:‬‬

‫‪ -1‬مددن خددالل ب د م ‪ Flash Develop‬ن ددت‬

‫اي‪،‬د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د‬
‫‪library/CSS/managebooks.html‬‬

‫يسمى ب د ‪ ft‬بج دب الندت‬ ‫مي‬ ‫‪-2‬‬

‫‪ bar‬كم يأتي‪:‬‬
‫> "‪<div class="bar" id="ft‬‬

‫م ظ اي‪،‬‬ ‫‪-3‬‬

‫‪2‬‬ ‫‪:ft‬‬ ‫التنس ق الس ايي‬ ‫وإل‬

‫‪ -1‬مددن خددالل ب د م ‪ Flash Develop‬ن ددت‬

‫اي‪library/CSS/formatting.css ،‬‬

‫التنس ق الت ل ‪:‬‬ ‫‪ ft‬و‬ ‫‪ -2‬درج ايي‬

‫‪#ft‬‬
‫{‬
‫;‪width:990px‬‬

‫لتحهيه مل ايق س استخهم الخ ص‬

‫‪ width‬و كتب ‪ 999‬بكسل‬

‫‪5‬‬

‫‪2‬‬ ‫‪81‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع السفلي ‪Footer‬‬

‫;‪height:40px‬‬
‫لتحهيه ار ع ايق س استخهم الخ ص‬
‫‪ height‬واكتب ‪ 09‬بكسل‬

‫; ‪border: 3px solid white‬‬

‫اط ر الس ايق س استخهم الخ ص‬ ‫إل‬

‫مهد ُ‬
‫السم بد ‪ 3‬بكسلن والتمط‬ ‫‪ border‬نوا ّ‬
‫بد غير متق س و ال‪ ،‬ن األب ض‬

‫;‪background-color: blueviolet‬‬
‫لتغ ير ل ن خ‪ ،‬ايق س استخهم الخ ص‬
‫‪background-color‬‬

‫;‪float: left‬‬
‫لتح ت د د د د ايق د د د ددس م د د د د اليس د د د د ر اسد د د ددتخهم‬
‫الخ ص د ‪ float‬و يقن دده تح د ح ت د اليت ص د‬
‫ق ًّ د د ن م د د ال م ددين و اليسد د رن بح د د ‪،‬تد د‬
‫اليت صد د د بج حد د د كمد د د يح د دده م مد د د فد د د مد د د‬
‫"الت د الددتي" ف د ب د م ‪Microsoft word‬‬
‫واكتب م اليس ر ‪. left‬‬

‫;‪margin: 5px‬‬
‫لتحهيه اله مش استخهم الخ ص ‪margin‬‬
‫واكتب ‪ 5‬بكسل‬

‫}‬

‫‪3‬‬ ‫‪82‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع السفلي ‪Footer‬‬

‫لتكد ن اللم‪،‬د اليح ئ د لتنسد ايق ددس الس د ق‬

‫‪ Footer‬ك آلتي‪:‬‬
‫‪#ft‬‬
‫{‬
‫;‪width:990px‬‬
‫;‪height:40px‬‬
‫; ‪border: 3px solid white‬‬
‫;‪background-color: blueviolet‬‬
‫;‪float: left‬‬
‫;‪margin: 5px‬‬
‫}‬
‫‪ -6‬م ظ اي‪،‬‬

‫‪ -7‬مددن خددالل ايتن د ‪Google Chrome‬ن‬

‫سد د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د ددتي اي‪ ،‬د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د‬
‫‪library/CSS/managebooks.html‬‬

‫د التنس د ق اي ج د د‬ ‫‪ -8‬تمددظ د د‬
‫ف النت ‪ bar‬وفد اييد ‪ ft‬ناذ ان اييد ‪ft‬‬
‫ملقس ايق س الس ق قط‬ ‫س‬

‫‪8‬‬

‫‪4‬‬ ‫‪83‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع السفلي ‪Footer‬‬

‫تب ‪:‬‬
‫الن ح‬ ‫مك‬ ‫نس‬ ‫‪ ‬لت‬
‫طق‬ ‫‪ Managebooks.html‬وذل‬
‫ل‪،‬تنس ق التي قمت بإدراجه داخل م‪،‬‬
‫‪Formatting.Css‬ن يجب ملق وت ربط‬
‫ب ي‪،‬‬ ‫‪formatting.css‬‬ ‫م‪،‬‬
‫‪ Managebooks.html‬وذلك بالكيفية‬
‫التي تم شرحها ف اللزء الخ ص نس‬
‫ايق س ‪container‬‬

‫الن ح‬ ‫استي ا‬ ‫ملته‬ ‫‪‬‬

‫‪ Managebooks.html‬س يت‬
‫ايهرج ف اي‪،‬‬ ‫جم س التنس ق‬
‫‪ ( formatting.Css‬ان وجه ) ولي‬
‫قط م قمت بإدراج لت‬

‫‪5‬‬ ‫‪84‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪sidebar‬‬ ‫األول‬
‫الثانوي‬

‫لتنسي ييقطع ي ي ع ‪sidebar‬ععع وجي ييو ع‬

‫ً‬
‫ع‪ managebooks.html‬علين ا ا ا ا ا ا ا ع والع‬ ‫بييييييي‬
‫تعي ي ع لتنسي ييق ع لتي يينع ي ي عإض ي ي لذل عل ي ي ل ع‬
‫‪2‬‬
‫ي عوذل ي عب ا ييتف ع ي ع‪layout.html‬ع‬
‫ً‬
‫نس ييطعاس ييس اعوالا ييتع قعت ي ع لتنس ييق ع‬
‫أتس ع آلتي‪ :‬ع‬
‫‪ -1‬ا ي علييملتع ت ي ‪،Google Chrome‬ع‬
‫أاي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ييتع قع ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ع‬
‫‪library/CSS/layout.html‬‬

‫ع‬ ‫ّ‬
‫عبضغطعزر ع ل أرةع أل ععلىع‬ ‫‪ -2‬أقو‬
‫لج نبن ع‪ Sidebar‬ع عوا ع ل ئ ة ع نبث ةع‬
‫ألت رع‪ inspect element‬ع‪.‬‬

‫‪ -3‬اقظه عتسويب عأا ل ع ين ع لش شةع‬

‫ع‬ ‫حتوي عتنسق ع‪ Css‬ع س ةععلىع‬
‫لج نبنع‪Sidebar‬عوهيعك آلتيع‪:‬‬
‫ع‬
‫ع‬

‫ع‪022‬ع ب سلع‪.‬‬ ‫ع قع‬ ‫‪-‬‬

‫عالرت عب رع‪052‬عب سلع‪.‬‬ ‫‪-‬‬
‫عبس عا ره ع‪ 0‬عب سل عوغيرع‬ ‫إط ر ُ‬ ‫‪-‬‬
‫ات عو ل ونعع‪blueviolet‬ع‪.‬‬
‫عل قةعب ل ونع‪greenyellow‬ع‪.‬‬ ‫‪-‬‬
‫وه اشعا رهع‪5‬عب سل ع‪.‬ع‬ ‫‪-‬‬
‫‪Padding‬عب رع‪02‬عب سلع‪.‬‬ ‫‪-‬‬
‫عن حقةع ليس رع‪ .‬ع‬ ‫عو‬ ‫‪-‬‬
‫ع‬
‫‪3‬‬
‫ع‬
‫‪1‬‬ ‫‪85‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫ع‬
‫ع‬
 ‫تنسيق املقطع ‪sidebar‬‬
‫ع لج نبن ع‪ Sidebar‬ع وجو عفيع‬ ‫ولتنسقط ع‬
‫ً‬
‫ع‪ managebooks.html‬وجب ععلي عأوالع‬
‫ع‬ ‫ع وبة عفي ع‬ ‫أن عأ رج ع لتنسق‬
‫‪formatting.css‬اعولع لعذل عأتس ع آلتي‪ :‬ع‬
‫ع‬
‫‪ -1‬ا ي علييملتعب ن ي ا ع‪Flash Develop‬عاعألييت ع‬
‫ع‪. library/CSS/formatting.css‬‬
‫ع‬

‫ع‬ ‫‪ -2‬أ رجع ع ي ع‪sidebar‬عوأض ييق ع لتنس ييق‬

‫لت لقة‪:‬‬
‫‪.sidebar‬‬
‫{‬
‫مالحظة ‪:‬‬
‫‪2‬‬
‫ي ي ي ع‪bar‬ع‬ ‫نملح ي ي يي(ع لن ي ي ييةعع‪ .‬ع لت ي ي يينعتس ي ي ييسطع‬
‫تي ي ي تععل ي ييىعأني ي ي عاي ي ي ع لن ي ييو ع‪class‬عوذلي ي ي ع ع ي يينع‬
‫إاك نق ي ييةعت سقي ي ييطعت ي ي ي ع لتنسي ي ييق ععلي ي ييىعأ ي ي ييرع‬
‫اي ي عا ي ي اأوععملاي ييةعف يييعن ي ي ع لوقي ي عبع ي ي ع‬
‫‪ id‬ع‬
‫;‪width:200px‬‬
‫ع اتف ع لخ صقةع‬ ‫لتح عع قع‬
‫‪width‬ع عوأ تبع‪200‬ب سلع‪.‬‬
‫ع‬
‫ع‬
‫ع‬
‫ع‬
‫ع‬

‫‪2‬‬ ‫‪86‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫عع‬
 ‫تنسيق املقطع ‪sidebar‬‬
‫;‪height:350px‬‬

‫ع لخ صقةع‬ ‫ع اتف‬ ‫لتح ع رت ع‬

‫‪height‬عو تبع‪350‬عب سل‪ .‬ع‬

‫;‪border :4px solid blueviolet‬‬

‫عأاتف ع‬ ‫عو علض لة عإط ر عل‬ ‫لتح‬
‫لس ع‪ 4‬عب سلاع‬ ‫لخ صقةع ‪ border‬عاع عوأح ع ُ‬
‫و لن طعبيعغيرعات عاع ل ونع‪ .blueviolet‬ع‬

‫;‪background-color : greenyellow‬‬
‫عأاتف ع لخ صقةع‬ ‫لتغقيرعلونعل قةع‬
‫‪background-color‬ع عوأ تبع ل ونع‬
‫‪.greenyellow‬‬

‫;‪margin:5px‬‬
‫ع ‪header‬‬ ‫لع لعه اشعبين عوبينع‬
‫أاتف ع لخ صقةع ‪margin‬ع عوأ تبع‪5‬عب سل ‪.‬‬

‫;‪padding:20px‬‬
‫لض لةعاس لةعل ص ةعبينعاحتوي عوح و ع‬
‫ع ل ل قةعأاتف ع لخ صقةع‬
‫‪padding‬ع عوأ تبع‪20‬عب سل‬

‫;‪float: left‬‬
‫لتح ي ي ي ي ي ع ي ي ي ي عن حقي ي ي ييةع ليس ي ي ي ي رعأاي ي ي ييتف ع‬
‫لخ صقةع‪float‬عا عوأ تبعن حقةع ليس رع‪. left‬‬
‫}‬

‫‪3‬‬ ‫‪87‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪sidebar‬‬

‫ع لج نبنع‬ ‫لتكون ع لج ة ع لنل ئقةعلتنسقطع‬

‫‪sidebar‬عك آلتي‪ :‬ع‬
‫‪.sidebar‬‬
‫{‬
‫;‪width:200px‬‬
‫;‪height:350px‬‬
‫;‪border :4px solid blueviolet‬‬
‫;‪background-color : greenyellow‬‬
‫;‪margin:5px‬‬
‫;‪padding:20px‬‬
‫;‪float: left‬‬
‫}‬
‫‪.‬ع‬ ‫‪ -3‬أح (ع‬
‫ع‬
‫‪ -4‬اي ي علي ييملتع ت ي ي ع‪Google Chrome‬اع‬
‫‪5‬‬
‫أ ا ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ييتع قع ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ع‬
‫‪library/CSS/managebooks.html‬‬
‫ع‬
‫‪ -5‬أالحيي(ع قي عتح ي قع ي ع‪sidebar‬عن حقييةع‬
‫ليس راعو ل ع لتنسق ع ض لةعإلق ‪ .‬ع‬

‫‪4‬‬ ‫‪88‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪sidebar‬‬

‫ع‬
‫تنبق ‪ :‬ع‬
‫ع ل حةع‬ ‫‪ ‬لقتم عتنسقط عاكون‬
‫عطس ع‬ ‫‪ Managebooks.html‬عوذل‬
‫ل تنسق ع لتنعق عبإ ر جه ع للعا ع‬
‫‪Formatting.Css‬ا ع جب ععلي عأوال عربطع‬
‫عع‬ ‫ب‬ ‫ع‪formatting.css‬‬ ‫ا‬
‫‪ Managebooks.html‬وذلك ب لكيفية‬
‫التي تم شرحه في ع لجزء ع لخ ص عتنسقطع‬
‫ع‪.container‬‬
‫ع ل حةع‬ ‫ع اتع ق‬ ‫‪ ‬عن‬
‫‪ Managebooks.html‬او ع تم عت سقطع‬
‫ع‬ ‫ع رجة عفي ع‬ ‫ج ق ع لتنسق‬
‫‪ formatting.Css‬ع عإن عوج ع عولي ع‬
‫ل طعا عق عبإ ر ج عهن ع‪.‬ع‬
‫ع‬
‫ع‬
‫ع‬

‫‪5‬‬ ‫‪89‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪content‬‬ ‫األول‬
‫الثانوي‬

‫لتنس يياملقطع ي ق ‪contents‬قققطعوج ييو ق‬

‫بي ي ي ي ي ي ي ع ق‪ managebooks.html‬ع ان ي ي ي ي ي ي ي قط ق‬
‫تعي ي قطلتنس ييا قطلت يينقإضاي ي قل ي ي ققلي يذلكق‬
‫‪2‬‬ ‫طع ي ق ذل ييكقب ا ييتف ط قطع ي ق‪layout.html‬ق‬
‫طعنس ييملقاس ييس اق ا ييتع طققت ييكقطلتنس ييا ق‬
‫أتس قطآلتي‪ :‬ق‬
‫ق‬
‫‪ -1‬ا قخاللق ‪Google Chrome‬اقأاتع قق‬
‫طع ق‪library/CSS/layout.html‬‬

‫ّ‬
‫قبضغطقزر قطلفأرةقطألإض قعلىقطع ق‬ ‫‪ -2‬أقو‬
‫‪ Content‬ق ا قطل ئضة قطعنبث ة قأخت رق‬
‫‪ inspect element‬ق‪.‬‬

‫‪ -3‬ااظه قتسويب قأافل قإضين قطلش شةق‬

‫إحتوي قتنسا ق‪ Css‬قطع س ةقعلىقطع ق‬
‫‪Content‬ق هيقك آلتيق‪:‬‬
‫ق‬
‫ق‬

‫‪ -‬ع ققطع قا طرهق‪ 077‬قباسل‪.‬‬

‫‪ -‬ق طرتف عققبض طرق‪077‬قباسلق‪.‬‬
‫‪ -‬ه اشقا طرهق‪07‬قباسلق‪.‬‬
‫‪ -‬طع قن حاةقطليس رق‪ .‬ق‬
‫ق‬
‫ق‬
‫ق‬
‫ق‬
‫‪3‬‬ ‫ق‬
‫ق‬
‫‪1‬‬ ‫‪90‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬ ‫ق‬
 ‫تنسيق املقطع ‪content‬‬
‫لتنسامل قطع ق‪ contents‬ق جبقعليقأ قأنق‬
‫قطع وبة قفي قا ق‬ ‫أ رج قطلتنسا‬
‫‪formatting.css‬قأتس قطآلتي‪ :‬ق‬

‫‪ -0‬اي قخيياللقب ني ا ق‪Flash Develop‬قاقأ ييت ق‬

‫طع ق‪library/CSS/formatting.css‬ق‬
‫ق‬
‫‪ -2‬أ رجقطعع ي ي ي ي ي ي ي ي ي ي ي ي ي ق‪content‬ق أ ي ي ي ي ي ي ي ي ي ي ي ي ييا ق‬
‫طلتنسا قطلت لاة‪:‬‬
‫‪# Content‬‬
‫{‬
‫;‪width:700px‬‬
‫لتح إ قع ققطع قأاتف قطلخ صاةق‬
‫‪width‬ق قأكتبق‪077‬قباسل‪ .‬ق‬

‫;‪height:400px‬‬

‫لتح إ قطرتف عقطع قأاتف قطلخ صاةق‬

‫‪height‬ق قأكتبق‪077‬قباسل ق‬

‫;‪margin:10px‬‬
‫‪2‬‬ ‫لعضلقه اشقبينهق بينقطع ق ‪header‬‬
‫أاتف قطلخ صاةق ‪margin‬ق قأكتبق‪07‬قباسل ق‬

‫;‪float:left‬‬
‫لتح يكقطع قن حاةقطليس رقأاتف ق‬
‫طلخ صاةق‪float‬ق قأكتبقن حاةقطليس رق‪left‬‬

‫}‬

‫ق‬
‫‪2‬‬ ‫‪91‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬ ‫ق‬
 ‫تنسيق املقطع ‪content‬‬

‫لتكي ي ي ي ييونقطلنض ي ي ي ي ييةقطل إي ي ي ي ييةقلتنسي ي ي ي يياملقطع ي ي ي ي ي ق‬

‫‪contents‬قك آلتي‪ :‬ق‬
‫‪#contents‬‬
‫{‬
‫;‪width:700px‬‬
‫;‪height:400px‬‬
‫;‪margin:10px‬‬
‫;‪float:left‬‬
‫}‬
‫‪-3‬قأحفظقطع ق‪ .‬ق‬
‫ق‬
‫‪-0‬قاي ي قخي يياللقطعتصي ييف ق‪Google Chrome‬اق‬
‫أ اي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ييتع قق طع ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ق‬
‫‪5‬‬ ‫‪library/CSS/managebooks.html‬‬
‫ق‬
‫‪-5‬قأ حظقطلتنسا قطلتنقأ افتقللىقطع ‪ .‬ق‬

‫‪3‬‬ ‫‪92‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق املقطع ‪content‬‬

‫ق‬
‫تنباه‪ :‬ق‬
‫قطلصفحةق‬ ‫‪ ‬لاتم قتنسامل قاكون‬
‫‪ Managebooks.html‬ق ذلك قطس ق‬
‫ل تنسا قطلتنققضتقبإ رطجه ق طخلقا ق‬
‫‪Formatting.Css‬ا قإجب قعلي قأ قربطق‬
‫ب ع قق‬ ‫ق‪formatting.css‬‬ ‫ا‬
‫‪ Managebooks.html‬وذلك بالكيفية‬
‫التي تم شرحها في قطلنزء قطلخ ص قتنساملق‬
‫طع ق‪.container‬‬
‫قطلصفحةق‬ ‫قطاتع طق‬ ‫‪ ‬عن‬
‫‪ Managebooks.html‬او قإتم قت ساملق‬
‫قطع رجة قفي قطع ق‬ ‫جضا قطلتنسا‬
‫‪ ( formatting.Css‬قلن ق ج ق) ق ليسق‬
‫طقا ققضتقبإ رطجهقهن ق‪.‬ق‬
‫ق‬
‫ق‬
‫ق‬

‫‪4‬‬ ‫‪93‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق اإلطار املضمن ‪iframe‬‬ ‫األول‬
‫الثانوي‬

‫لتنس يياإلطار ييمنطا ي ط‪iframe‬ططال ي ط‬

‫يوج يياطلاا ييعطا ي ط‪content‬طا وج ييولطب ييم ط‬
‫‪managebooks.html‬طوالي طعييابداطبااا ي ط‬
‫‪2‬‬ ‫الص ي ي ي ي ي ييالًمتطاُّاي ي ي ي ي ي ييد ط ا ي ي ي ي ي ي ييمطاو ط بي ي ي ي ي ي ييد ط‬
‫التنسييا متطااصم ييذط اي اطار ييمنطا ي طوذلي ط‬
‫بمعي ي ي ي ي ييت اا طا ي ي ي ي ي ي ط‪layout.html‬طا نسي ي ي ي ي ييإلط‬
‫مسي ي ييس م طو عي ي ييتبدااط ي ي ي طالتنسي ي ييا متطأ سي ي ي ط‬
‫اآل ي‪ :‬ط‬
‫ط‬
‫‪ -1‬م ي طاييملتطا تصييال ‪ Google Chrome‬ط‬
‫أعي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ييتبداط ا ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ط‬
‫‪library/CSS/layout.html‬‬

‫‪ -2‬أقو طب غطط طزن طالالأنة طاُّي ط لى طار منط‬

‫ط‪ iframe‬ط طوم طال مئ ذ طا بث ذط‬ ‫ا‬
‫أاتمنطاُّمدطط‪. inspect element‬‬

‫‪ -3‬عاظهد ط سويب ط لى طأعالع طي ين طالشمشذط‬

‫يًتو ط نسا متط‪ Css‬طا س ذط لىطار منط‬
‫طوهيطكمآل يط‪:‬‬ ‫ا‬
‫ط‬
‫ط‬

‫‪ -‬يًاط طب طإ من طبمل ون ط ‪blueviolet‬طط‬

‫بس طم اانهط‪4‬طبكسع طوغيرطمت ‪.‬ط‬ ‫طو ُ‬
‫‪ -‬هممشطم اانهط‪01‬طبكسع‪ .‬ط‬
‫ط‬
‫ط‬
‫‪3‬‬ ‫ط‬
‫ط‬
‫‪1‬‬ ‫‪94‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬ ‫ط‬
 ‫تنسيق اإلطار املضمن ‪iframe‬‬

‫طا وجول طفي طم ط‬ ‫ولتنساإل طا طر من طا‬

‫‪ managebooks.html‬وجبط ليطأو طأنطألنجط‬
‫طم ط‬ ‫طفي‬ ‫طا وبذ‬ ‫التنسا مت‬
‫‪ formatting.css‬طولب عطذل طأ س طاآل ي‪ :‬ط‬

‫‪ -0‬م ي طاييملتطبدنييمم ط‪ Flash Develop‬طأفييت ط‬

‫ا ط‪library/CSS/formatting.css‬‬
‫ط‬

‫‪ -2‬ألنجطا ب ي ي ي ي ييد ط‪cnt‬طوأض ي ي ي ي ييا طالتنسي ي ي ي ييا متط‬

‫التملاذ‪:‬‬
‫‪# cnt‬‬
‫{‬
‫;‪border: blueviolet 4px solid‬‬
‫طأعت ا طااصم اذط‬ ‫رضمفذطإ منطإلىطا‬
‫وع طبيط‬‫‪border‬ط ط طوأكتبطال ونط ‪blueviolet‬طط ُ‬
‫‪ 4‬طبكسع طون ططغيرطمت ‪ .‬ط‬

‫‪2‬‬ ‫;‪margin:10px‬‬

‫ط ‪content‬‬ ‫لب عطهممشطبي طوبينطا‬

‫أعت ا طااصم اذط ‪margin‬ط طوأكتبط‪01‬طبكسع ط‬

‫}‬

‫ط‬
‫ط‬
‫ط‬
‫ط‬
‫ط‬
‫‪2‬‬ ‫‪95‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق اإلطار املضمن ‪iframe‬‬

‫ط‬ ‫لتكون طااج ذ طالنامئاذ طلتنساإل طار من طا‬

‫كمآل ي‪ :‬ط‬
‫‪#cnt‬‬
‫{‬
‫;‪border: blueviolet 4px solid‬‬
‫;‪margin:10px‬‬
‫}‬

‫ط‪ .‬ط‬ ‫‪ -3‬أحالظطا‬

‫ط‬
‫‪ -4‬م ي ي طاي ييملتطا تصي ييال ط‪.Google Chrome‬ط‬
‫أ ع ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ييتبداط ا ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ي ط‬
‫‪library/CSS/managebooks.html‬‬
‫ط‬
‫‪ -5‬أ حظطالتنسا متطالتيطأضاالتطإلىطا طر من‪ .‬ط‬

‫‪5‬‬

‫‪3‬‬ ‫‪96‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق اإلطار املضمن ‪iframe‬‬

‫ط‬
‫با ‪ :‬ط‬
‫‪ ‬لاتم ط نساإل طمكونمت طالصالًذط‬
‫ط س مط‬ ‫‪ Managebooks.html‬طوذل‬
‫ل تنسا متطالتيطق تطبإلناجهمطلااعطم ط‬
‫‪ Formatting.Css‬طيجب ط لي طأو طنبطط‬
‫بم طط‬ ‫ط‪formatting.css‬‬ ‫م‬
‫‪ Managebooks.html‬وذلك بالكيفية‬
‫التي تم شرحها في طااجزء طااصمص ط نساإلط‬
‫ط‪.container‬‬ ‫ا‬
‫طالصالًذط‬ ‫طاعتبداا‬ ‫‪ ‬ا‬
‫‪ Managebooks.html‬عو طيتم ط ساإلط‬
‫ج ا طالتنسا مت طا انجذ طفي طا ط‬
‫‪ ( formatting.Css‬طإن طوجات ط) طوليسط‬
‫ف ططممطق تطبإلناج طه مط‪.‬ط‬
‫ط‬
‫ط‬
‫ط‬

‫‪4‬‬ ‫‪97‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫قالب ملف ‪PHP‬‬ ‫األول‬
‫الثانوي‬
‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬
‫إلنشاء قالب ملف ‪ ،PHP‬أتبع اآلتي‪:‬‬

‫‪ -1‬من خالل برنامج ‪ ، Flash Develop‬أفتح‬

‫قائمة ‪.File‬‬

‫‪ -2‬أضغط على القائمة الفرعية ‪.New‬‬

‫‪ -3‬أختار نوع امللف ‪.PHP Document‬‬

‫‪4‬‬

‫‪ -4‬أالحظ أن محتوى ملف ‪ php‬يبدأ بالعالمة‬

‫‪ <?php‬وينتهي بالعالمة >? وتكون‬
‫التعليمات البرمجية محصورة بين هاتين‬
‫العالمتين ‪ ،‬هكذا‪:‬‬

‫‪<?php‬‬

‫;”)‪echo”Hello :-‬‬

‫;”‪echo “Dynamic Web Site‬‬

‫>?‬

‫‪1‬‬ ‫‪98‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمة ‪echo‬‬ ‫األول‬
‫الثانوي‬

‫ت ت ت ت ‪ echo‬لطبا ت ت ت ت ل ت ت ت ت‬ ‫تس ت ت ت ت‬
‫ت ت ت ت ت ت ل ا ت ت ت ت ت ت و يمك ن ت ت ت ت ت ت أن‬ ‫و لبيان ت ت ت ت ت تتا‬
‫ها بع ة طرق كاآلتي‪:‬‬ ‫أس‬
‫‪1‬‬

‫‪ -1‬لطبا ت م ت "‪، "school library‬‬

‫أكتبها بالشكل اآلتي‪:‬‬

‫;”‪echo “school library‬‬

‫‪ -2‬لطبا ت ت ت م ت ت ت "‪"school library‬‬

‫بحيث ي يها سطر ي ل فح يجب‬
‫أن أدرج عه ت تتا ت تتا ‪ html‬فأك به ت تتا‬
‫بال كل آلتي‪:‬‬

‫;”> ‪echo “school library <br/‬‬

‫‪2‬‬

‫ت ت ‪ $name‬أك بهت تتا‬ ‫‪ -3‬لطبا ت ت ايم ت ت‬

‫بال كل آلتي‪:‬‬

‫;‪echo $name‬‬

‫‪3‬‬

‫‪1‬‬ ‫‪99‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمة ‪echo‬‬

‫‪ -4‬أحيانت تتا أا ت تتا لطبا ت ت أح ت تتاج أن أد ت ت‬

‫ونص ولعمتل للت‬ ‫ب ن ن ن أو‬
‫ل قط ‪ .‬كاآلتي‪:‬‬ ‫س‬
‫;‪$x=4‬‬
‫;‪echo “The Book Number is “ . $x‬‬

‫‪4‬‬ ‫حيث س ك ن ل تيج ‪:‬‬

‫‪The Book Number is4‬‬

‫ها‬ ‫‪ -5‬س ت ت تتل ي ل ط ت ت تترق لكيفيت ت ت ت ست ت ت ت‬

‫الحقا‪.‬‬

‫‪2‬‬ ‫‪100‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫البنية التكرارية ‪While‬‬ ‫األول‬
‫الثانوي‬

‫البنية التكرارية‪ :‬تقوم بتكرار أوامرر مييةرة ى رت قت قر‬

‫ٌ‬
‫شرط ما‪.‬‬

‫سأقوم بكتابة جملة تكرارية لطباعة الرقرام مر ‪ 1‬ى رت‬

‫‪ 11‬ب يث تتم كتابة كل رقم على سطر جدقد‪:‬‬

‫;‪$x = 1‬‬
‫)‪While ($x <=10‬‬
‫{‬
‫;”>‪echo “ $x <br/‬‬
‫طباعة الرقم قليه سطر جدقد‬
‫}‬

‫أالىظ م الوامر البرمجية السابقة بأنه ترم يرا البداقرة‬

‫تييرن متينرر‪ ،‬وإعطراؤه قيمرة ويرا ‪ ،1‬ويمكر للقيمرة أ‬
‫تتينر ب سب ما هو مطلوب مةك‪.‬‬

‫أكت ررب عالم ررة ‪ while‬ويليه ررا الش رررط ا ب رراا ب ررالتكرار‪،‬‬

‫وبن }{ أضع السطر ال ي أريد تكرارها‪.‬‬

‫و سيتم التطرق لكيفية استخدامها الىقا‪.‬‬

‫‪1‬‬ ‫‪101‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫البنية الشرطية ‪IF / Then / Else‬‬ ‫األول‬
‫الثانوي‬

‫ت ت ت ا يت ت ت ا‬ ‫تس ت تتنية الشرطيت ت ت الشيت ت ت ي ا ت ت ت ا‬

‫‪،‬اس ت ت ا‬ ‫تعليم ت ت ات ي ت ت ا ت ت ا ت ت ا ع ت ت‬
‫ا" ‪The‬‬ ‫تكناتت اتعليم ت ات ي ت اشعرار ت اررتتا‬
‫ا ا نت ا‬ ‫‪"student pass the exam‬ابيت‬
‫د نها كبرا ا واتساويا‪،05‬ا‬

‫‪ -1‬ست تنا اشنعيت ا نغ تتراشي مت ا يمت اد ت ا‬

‫لشعاشب‪ :‬ا‬
‫;‪$mark=60‬‬
‫الشي الشبر جيا)‪If ($mark >=50‬‬
‫ا};”‪{echo “The student pass the exam‬‬
‫رار الشعرا اإذلا ققالشي‬
‫ا‬
‫تست تتبالملوت تتا المل ة ت ت اس ت ت ن ا رار ت ت ا ‪The‬‬
‫‪student pass the exam‬األ ا يمت الملنغ تترا‬
‫‪$mark‬ا كبرا ا‪ . 05‬ا‬
‫ا‬
‫ا‬

‫‪1‬‬ ‫‪102‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫البنية الشرطية ‪IF / Then / Else‬‬

‫‪ -2‬أل ت ت ت اا ت ت ت الشنعليمت ت ت الشبر يت ت ت الشس ت تتاتق ا‬

‫ت يت اتتتن ا رارت ا ملت ا" ‪The student‬‬
‫‪ "failed‬إذلاش ا ك اد الشعاشبا كبرا ا‬
‫واتساويا‪05‬ا‪:‬‬
‫;‪$mark=60‬‬

‫)‪If ($mark >=50‬‬

‫الشرط البرمجي‪.‬‬

‫ا;”‪echo “The student pass the exam‬‬

‫طباعة العبارة إذا تحقق الشرط البرمجي‪.‬‬

‫‪else‬‬
‫إذا لم يتحقق الشرط ‪.‬‬

‫;”‪Echo “The student failed‬‬

‫طباعة العبارة إذا لم يتحقق الشرط‪.‬‬
‫ا‬
‫س ن الشنع قاشكي ي السنيةل هااالتقاا‪ .‬ا‬

‫ا‬

‫‪2‬‬ ‫‪103‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫املتغريات‬ ‫األول‬
‫الثانوي‬

‫تختلف ‪ PHP‬عن باقي لغات البرمجة الةن تاتةا‬

‫أن نعة ة ةةرا اقتغ ة ة ةرات ة ة ة ا ة ة ةةتخ ام ا‪ ،‬لكة ة ةةن‬
‫ج ة ة ة ة أن أراعيهة ة ة ةةا عن ة ة ة ة‬ ‫توج ة ة ة ة ع ة ة ة ة ت ة ة ة ةةا‬
‫ا تخ ام أي متغ ر‪:‬‬

‫ةةون تةةو اقتغ ةةر‪ :‬تص ةا‪ ،‬أو ر م ةا‪ ،‬أو‬ ‫‪ .A‬ة‬
‫عمل ‪ ،‬أو تاريخا‪.‬‬
‫‪ .B‬ة ة أ اقتغ ة ةةر بة ة ة ‪ $‬ت ع ة ةةا ا ة ة اقتغ ة ةةر‪،‬‬
‫مثال‪. $student :‬‬
‫أ اقتغ ر بر ‪.‬‬ ‫‪ .C‬ال مكن أن‬
‫‪ .D‬حسا ة ةةح افحة ةةرا ال ة ة ‪ $Name‬ختلة ةةف‬
‫عن ‪. $name‬‬

‫إذا أردت أن أ ة ة ةةتخ م متغ ة ة ة ةةرا لحامة ة ة ة ا ة ة ة ة‬

‫‪ ،‬أت ة‬ ‫الطال ة ‪ ،‬باحةةك ةةون تةةو اقتغ ةةر ت ة‬
‫‪1‬‬ ‫ما أتي‪:‬‬
‫;”‪$studentName=”Ahmed‬‬
‫‪ -1‬إذا ك ةةان ت ةةو اقتغ ةةر تصة ةا ال ةةن أنسة ة أن‬

‫‪.‬‬ ‫ت ون حمته ب ن‬

‫‪ -2‬ة ة ةةلت التط ة ة ةةر لكح حة ة ة ة ا ة ة ةةتخ ام ا‬

‫الح ا‪.‬‬

‫‪1‬‬ ‫‪104‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعرّف كيف يعمل النموذج من خالل‬ ‫األول‬
‫‪chrome devtools‬‬ ‫الثانوي‬

‫دء ل ل د ل ل م د ل ل د‬ ‫قب للبدء بل ل ادنما للتي دء متل ل‬

‫خال ه ل د ج س ل دلللسال دء س ل ي د م للم د ل د‬
‫د مل ل د‬ ‫أيالدأندأ لليفدتي للذد جت للبدع ل دء مت ل‬

‫‪3‬‬ ‫ء مج بد جه دي كدأقومدنت د أ ي‪ :‬د‬

‫‪1‬‬ ‫‪2‬‬
‫‪Google‬‬ ‫للل د‬ ‫‪ -1‬أشل ل للابد ما ل ل ل دء‬
‫‪.chrome‬‬
‫‪ -2‬أدخبدء جموءن‪:‬‬
‫‪localhost:8080/library/php/SelectForm.html‬‬

‫دت م ل د‬ ‫‪ -3‬ت مللوهدعل دء ال د لليد تللو‬

‫دددد‬ ‫ل ل ل ل دردخل ل ل ل د جيل ل ل ل د ت ل ل للبدعد د د د‬
‫م ل دء ل د‬ ‫الكتدد‪ ،‬دال للمجيءسدلللسال دء‬
‫خلدلد‬ ‫ل ددا للمه دأق للبد ل دء يت ل دء‬
‫ء متو ‪.‬‬
‫‪4‬‬ ‫‪ -4‬يأل جيفد يدتي ي د تبدع دء جليءاء د‬
‫أ للمج ندنتطل للو دء مال ل د ‪chrome‬‬
‫‪.devtools‬دفأضللا ز دء للأ دءأل ت ل د ل د‬
‫أهد كل ل ل ل ند ل ل ل دء ا ل ل ل د ديأخمل ل ل ل دءأل ل ل لليد‬
‫‪ .Inspect element‬د‬

‫‪1‬‬ ‫‪105‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعرّف كيف يعمل النموذج من خالل‬
‫‪chrome devtools‬‬
‫‪7‬‬ ‫‪5‬‬ ‫‪6‬‬ ‫‪ -5‬أضا د يدء مبوي د‪.Network‬‬
‫‪ -6‬دأضل للا د ل ل د يا ل ل دء ل للم د ل لليدء متل للو د‬
‫ديأدخبدء يت د‪ 3‬مثال‪.‬‬
‫‪ -7‬يأضا د يدء ز د‪.Select Records‬‬
‫‪ -8‬دء ط دء س د طو د‪chrome‬دأالحل د‬
‫ل ل دء جت للودد‪Name‬دظه للو د للذد ل ل د للو د‬
‫‪php‬دن د"‪"SelectQuery.php‬د‪.‬‬
‫‪ -9‬ي ل ل ل دء جت ل ل للودد‪method‬دظه ل ل للي دء جب ل ل ل د‬
‫‪.GET‬د‬
‫‪ -11‬تت ل ل دأالح ل ل دأندء يت ل ل دء ل ل دأدخ ل ل د ل ل د‬
‫ء مت ل ل للو دظه ل ل للي د ل ل ل ل دش ل ل لليي دء جم ل ل للوءند ‪11‬‬
‫تما ل ديع ل ءدن طللبدطيي ل دء ل د‬
‫‪.GET‬‬

‫أ ل ل للمدمادأ ل ل للرد مل ل ل ل دض ل ل للاط د ل ل لليدء ل ل للز د‬

‫‪ )Select‬ل ل ل دء مت ل ل للو دت ل ل ل د‬ ‫(‪Records‬‬
‫ء للم اد للذد ل د للو د‪php‬ديء ل هد م للوهد‬
‫ء مج يت ل ل ل ل دء ة مي ل ل ل ل دء م ل ل ل ل دنتج س ل ل ل ل د‬
‫ء بي ل دء ل دت ل دردخ ه ل د ل دء متللو دتت ل د‬
‫تل ل د ل لليسدع ل ل دء بي ل ل د ل ل دشل لليي د مل للوءند‬
‫دء وي دن طبدطيي در ل دء بي ل د‬
‫‪.GET‬‬

‫‪8‬‬ ‫‪9‬‬

‫‪2‬‬ ‫‪106‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعرّف كيف يعمل النموذج من خالل‬
‫‪chrome devtools‬‬
‫‪11‬‬ ‫‪12‬‬ ‫‪13‬‬
‫يألالحل ل ل ل ل ل ل د ل ل ل ل ل للكد ل ل ل ل ل ل ل د ل ل ل ل ل للذدء مت ل ل ل ل ل للو د‬
‫‪SelectForm.html‬دأقومدنت د أ ي‪:‬‬
‫‪ -11‬ل دخللال دء ما ل د دأتيءج ل در لليد ل د‬
‫ء مت ل للو د‪SelectForm.html‬دن ط ل للا د‬
‫يدء ز د‪.‬‬

‫‪ -12‬أ م ل ل ل للبدر ل ل ل لليدء مبويل ل ل ل ل د‪Elements‬د ل ل ل ل ل د‬

‫‪.chrome devtools‬‬
‫‪ -13‬أالح ل ل ل ل ل دء ست ل ل ل ل ل دء م ل ل ل ل ل دن جال ل ل ل ل ل د‬
‫>‪ <form‬دفأ ل ل للمدمادأند ل ل للذد ج يت ل ل ل د‬
‫‪php‬د وجل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل للوددضل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل للت د‬
‫ء م ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل للي‬
‫"‪ )action="SelectQuery.php‬د‬
‫‪14‬‬
‫يطيي ل در ل دء بي ل دضللت دء م للي د‬
‫"‪)method="get‬‬
‫‪ -14‬دتت ل دأالح ل دأندء للز د ‪)Select Records‬د‬
‫تل ل د جيي للرد ل ل دخ للال دء جال ل ل د>‪<input‬‬
‫ة ل ل ل ل دء م ل ل ل للي د"‪type="submit‬ديت ل ل ل ل د‬
‫اي ل ل ل ل ل ل ل ل ل ل ل د موء ل ل ل ل ل ل ل ل ل للرد ل ل ل ل ل ل ل ل ل ل ل دخ ل ل ل ل ل ل ل ل ل للال د‬
‫ء م ل للي "‪value="Select Records‬‬
‫يعلودء سل و د ل دء للم اد لذدء للد‪php‬د‬
‫م دء طا د ير‪.‬‬

‫‪3‬‬ ‫‪107‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫الفرق بني طريقة إرسال البيانات‬ ‫األول‬
‫‪ GET‬و ‪ POST‬يف النموذج‬ ‫الثانوي‬

‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫‪4‬‬

‫رر ق ب رر ق‬ ‫ألتع ررفرق بي ررفتق ر ر اقبفانار ر ق‬
‫‪get‬قوق‪post‬ق أقومق لخطو ق آلت ة‪ :‬ق‬
‫‪Google‬‬ ‫ررر ق‬ ‫‪ -1‬أشر ر رراإلقترنر ر رري ق‬
‫‪.chrome‬‬

‫‪ -2‬قأدخإلق بعنو ا‪:‬‬

‫‪localhost:8080/library/php/SelectForm.html‬‬

‫‪ -3‬ف رربقتفلر ر ق ب ررن ق‪number of copies‬ق‬

‫أدخإلق بن مةق‪4‬قتثال‪.‬‬

‫‪ -4‬قوأضاطقعلىق بز ق‪.Select Records‬‬

‫‪5‬‬ ‫‪ -5‬فأالحظقفبقشرفاطق بعنرو اقوررو ق ب ر ق‬
‫با قتمق دخ بر قفبق بنموذجقتس وقةق مق‬
‫تفلر ر ر ق ب ر ررن ق(‪،)COPIES_BOOK‬قوهر ر ر ق‬
‫ق ب ر ق ددخةرةقفربق‬ ‫يعن قأ هققدقتمق‬
‫بنمر رروذج‪ ،‬وعفضر ررر قفر رربقشر ررفاطقعنر ررو اق‬
‫بنر رري ةق‪،URL‬قوه ر ر ق يتر ررإلق ر ررر د مق‬
‫ق‪ . get‬ق‬ ‫بفانةق‬

‫‪1‬‬ ‫‪108‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫الفرق بني طريقة إرسال البيانات‬
‫‪ GET‬و ‪ POST‬يف النموذج‬

‫‪6‬‬ ‫‪7‬‬
‫ر ر قفر رربق‬ ‫وألتعر ررفرقت ي ر ررةقت دسر رردقبفانر ررةق‬
‫بنموذج‪:‬‬

‫‪ -6‬تررالقخررال ق درنرري ‪،‬قأتف ج ر ق اررىق بنرري ةق‬

‫بسر ر ر ر نةق‪ SelectForm.html‬بت ر ر رراطق‬
‫علىق بز ق‪..‬‬

‫‪ -7‬أض رراطقا ق بي ررأ ق ألسم ررالقف رربقأ قت ر اقت ررالق‬

‫بنر ر رري ة‪،‬قوأخر ر ر ر ق ألتر ر ررفق ‪Inspect‬‬
‫‪.element‬‬

‫‪8‬‬ ‫‪9‬‬

‫‪ -8‬أضاطقعلىق بر وابق‪.Elements‬‬

‫‪ -9‬أ ر ررلقعر ررالق بعالتر ررةق>‪ <form‬وقأحر رردده ‪،‬ق‬

‫ق‪get‬قترمق‬ ‫قب‬ ‫فأالحظقأاقبفانةق‬
‫ت دسده قفبق لخ ص ةق"‪.method="get‬‬

‫‪2‬‬ ‫‪109‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫الفرق بني طريقة إرسال البيانات‬
‫‪ GET‬و ‪ POST‬يف النموذج‬

‫‪12‬‬ ‫‪11‬‬ ‫‪11‬‬ ‫ق ددخةة قفب ق بنموذجق‬ ‫ت ذ قبو قك ق ب‬

‫فاة قواجب ق خي ؤه ؟ قفب قه ه ق لح بة قسكييق‬
‫قتال ق ‪ get‬ق اى ق‪،post‬ق‬ ‫تا قبفانة ق‬
‫وألجفبقذبك‪:‬‬
‫‪ -11‬أضاطقضاط قتزدوج قعلىقع ق‪get‬ق‪،‬قوق‬
‫أ ت دبر ق ررقق‪. post‬‬
‫‪ -11‬أ رنإلق اىق بنموذجقوقأدخإلققتثالق بن مةق‪.2‬‬
‫‪ -12‬أضاطقعلىق بز ق‪.Select Records‬‬
‫ق‬
‫ق‬
‫ق‬

‫‪13‬‬
‫‪ -13‬قأالحظ قأا ق بن مة ق با قأدخةته قفبق‬
‫بنموذج‪ ،‬قبم قتظرف قفب قشفاط قعنو اق‬
‫بني ة‪ .‬ق‬

‫‪3‬‬ ‫‪110‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫التعرف على مكوّنات النموذج‬ ‫األول‬
‫الثانوي‬
‫‪2‬‬ ‫‪1‬‬
‫سأتعرف مكونات النموذج من خالل‬
‫ّ‬
‫املطور ‪ chrome devtools‬ولذلك‪:‬‬
‫ن ن ن ن ن ي‪Google‬‬ ‫‪ -1‬م ن ن ن ننويبن ن ن ن ن يم ن ن ن ن ن ي‬
‫‪chrome‬يأدبلي عن ن‪:‬‬
‫‪localhost:8080/library/php/InsertForm.html‬‬
‫أالحن ن ن ننميأنيم ن ن ن ن ي ن ن ن ن ن يم ن ن ن ن نيمن ن ن ننوي‬ ‫‪-2‬‬
‫ن ن ن ن ايي ن ن ننلي ن ن ن ن وي ع ن ن ن ين ن ن ن ي‬
‫إلدب ن ن ن يأن ن ن ن ‪:‬يم ن ن ن يم ن ن ننوي ن ن ن ن ‪:‬ي‬
‫ي نن ن ن ن ن ن ن ي‬ ‫ك ن ننننننن ا ي ننننننن‬
‫عددي ‪.‬‬
‫يم ن ن ية إلل ن ن يمل ن نننيأ يي ن ننلي ن ن ن وي‬ ‫‪-3‬‬
‫‪3‬‬ ‫‪4‬‬
‫‪.‬‬ ‫ظ ئفيم‬
‫ألتع ن يك ن يمء ن يم ن ن ي ن ن ي‬ ‫‪-4‬‬
‫أل ن ي ي ن يةي ألي ننويي نننيأنيم ن نيم ننوي‬
‫‪6‬‬ ‫ي يأب ن ن ي ألمن ن ي ‪inspect‬‬ ‫ن نن‬
‫‪.element‬‬
‫أل ي لنيأد ةي ن ي عن يم نن ي‬ ‫‪-5‬‬
‫‪.‬‬ ‫ن‬
‫أح ن ن ن ن ىي ن ن ن ن ةي لن ن ن نننيم ن ن ن ننفيم ن ن ن ن ن ي‬ ‫‪-6‬‬
‫ن ن ن ي ن ن الحمييس ن ننلي ظ ن ن ي ن ن ي‬
‫ع م ي لخ ص ية عن ي ن نيي ن ي ن ي‬
‫مؤش ي ة‪.‬‬
‫ي‬

‫‪5‬‬

‫‪1‬‬ ‫‪111‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التعرف على مكوّنات النموذج‬
‫‪7‬‬ ‫‪8‬‬ ‫‪9‬‬

‫م‬
‫ي‬ ‫‪ -7‬أالح ن ننمي نن ن نندم ييس ن ن منليمن ن ن ن ي ن ن ن ن‬
‫ك م ن ن يظ ن ن ي ن ن ي ع من ن ي>‪<form‬‬
‫لنيم هي ن ية ة‪.‬‬ ‫أل‬

‫ي‪Elements‬‬ ‫‪ -8‬ي أالحميينين ةي‬

‫‪ -9‬أنيمء ن ين ن ي دي نندي يي نندأ ة ع م ن ي‬

‫>‪<form‬ي يي ن ننددي من ن ن ي ن ن ن يم ن ننفيي‪php‬ي‬
‫لخ ص ي‪action‬ي ط يم ي نن ي‬
‫‪ get‬أو ‪post‬ييني لخ ص ي‪.method‬‬

‫‪11‬‬ ‫‪11‬‬ ‫‪12‬‬ ‫يمد ي ن وي م ع ي ن ‪ :‬ي‬ ‫ألتع يك‬

‫‪.‬‬ ‫ي لنيأد ةي‬ ‫‪ -11‬أل‬

‫ي لننني عنن ني ‪Enter Book‬‬ ‫‪ -11‬ثن يألن‬

‫‪.ID‬‬

‫‪ -12‬أالح ننميي نننين ن ةي ن يأن ن يي ن يمدب ن ي‬

‫عن ن نيل ن وي ع م ن ي>‪ <p‬يت ع ن ي م ن ي‬
‫>‪ <input‬إلد يم ن ن ن ن ي ن ن ن ننن ي لخ ن ن ن ن اي‬
‫ةإدب يك دي ك ب‪.‬ي‬
‫ي‬

‫‪2‬‬ ‫‪112‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التعرف على مكوّنات النموذج‬

‫‪13‬‬ ‫‪14‬‬ ‫‪15‬‬

‫وألتعرف كيفية إدراج مربعات النصوص‪:‬‬

‫يث ي‬ ‫ي لنيأد ةي‬ ‫‪ -13‬أل‬

‫ي‬ ‫‪ -14‬أل ي لننيم ن ي نن ي أل يينني ن ن‬

‫ملح نييك دي ك ب‪.‬‬

‫ن يأن ن يي ن يي دي نندي‬ ‫‪ -15‬ن الحميي نننين ن ةي‬

‫لج‬

‫"‪<input type="number‬‬
‫>‪name="ID_BOOK"/‬‬

‫‪17‬‬ ‫‪ -16‬ألالح ن ننمي ن ن ية ن ن نيم ن ن ين ن ن يي ن ن ني‬

‫‪16‬‬ ‫‪18‬‬
‫ن صن ن ن ي يم ن ن ن ين ن ن يي ن ن ن نيي ن ن ن يأ ي‬
‫ة ن يق ‪:‬‬

‫يث‬ ‫ي لنيأد ةي‬ ‫‪ -17‬أل‬

‫‪ -18‬يأل ن ي ل نننيم ن ي ننن ي ن ء ي ملح ن ني‬

‫ن ني ك ب‪.‬‬

‫ن ن يأنن ن يين ن يي دي نندي‬ ‫‪ -19‬أالح ننميي نننين ن ن ةي‬

‫لج ي آلي ‪:‬‬

‫>‪<input type="text" name="TITLE_BOOK"/‬‬

‫ي‬

‫‪3‬‬ ‫‪113‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التعرف على مكوّنات النموذج‬

‫‪19‬‬ ‫‪21‬‬ ‫‪21‬‬

‫يث‬ ‫ي لنيأد ةي‬ ‫‪ -21‬أل‬

‫ن ي ملح ن ني‬ ‫‪ -21‬يأل ن ي لنننيم ن ي ننن ي‬

‫ي يمصد ي ك ب‪.‬‬

‫ن ن يأن ن ن يي ن ن يي دين نندي‬ ‫‪ -22‬أالحن ننميين نننين ن ن ةي‬

‫لج ي آلي ‪:‬‬
‫>‪<input type="date" name="DOE_BOOK"/‬‬

‫ي‬

‫‪22‬‬ ‫‪23‬‬ ‫‪24‬‬

‫يث‬ ‫ي لنيأد ةي‬ ‫‪ -23‬أل‬

‫ن‬
‫‪ -24‬يألن ي لنننيم ن ي ننن ي ألب ن ي ملح ن ي‬
‫دديءسخي ك ‪.‬‬

‫ن ن يأن ن ن يي ن ن يي دين نندي‬ ‫‪ -25‬أالحن ننميين نننين ن ن ةي‬

‫لج ي آلي ‪:‬‬
‫>‪<input type="number" name="COPIES_BOOK"/‬‬

‫‪4‬‬ ‫‪114‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التعرف على مكوّنات النموذج‬

‫‪ -26‬أ ن ن ن د ايأن ن ن ن يإلد يأد ةيمدب ن ن ن ‪-‬ك ن ن ن ي‬

‫‪25‬‬ ‫ن ننن يم ن ن ي‪-‬أ ن ن د ي ع م ن ن ي دي ن ن ي‬
‫>‪.<input‬‬
‫‪ -27‬يك ن يأالح ننميأنم ن يي ن وي لخ ص ن ي‪type‬ي‬
‫دينندين ن ‪:‬ي ن ن ي دب ن ي ن يم ن ي‬
‫‪26‬‬ ‫‪27‬‬ ‫ن ن ننن ي أل ي ي ب ن ن ن يك ن ن ن ن ي لخ ص ن ن ن ي‬
‫"‪type="number‬ي ي يألني نن ي دب ن ي‬
‫ني ق ‪.‬‬

‫‪ -28‬ي أ ن ننند ي ن ن ن ي ن ن ن ي ن ننن ي أل ي ن ننوي‬

‫ط ن ن ن ن ي لخ ص ن ن ن ن ي"‪name="ID_BOOK‬‬
‫‪28‬‬ ‫‪29‬‬ ‫يم ن ن ن ن ن ن ن ن ي ن ن ن ن ن ن ننن ي بن ن ن ن ن ن ن ن‬
‫"‪name="COPIES_BOOK‬‬

‫‪ -29‬أمن يينننيم ن ي ننن ي ن ء ي نن ي لخ صن ي‬

‫"‪type="text‬ي يألني ن ن ن ن ن ن ن ي دب ن ن ن ن ن ن ي‬
‫‪31‬‬ ‫‪31‬‬
‫نين ‪.‬ي‬

‫‪ -31‬ي أ ن ننند ي ن ن ي ن ن ي ن ننن ي ن ننويط ن ن ي‬

‫لخ ص ي"‪name="TITLE_BOOK‬‬

‫ي ن ي لخ صن ي‬ ‫‪ -31‬أم يينيم ي ن ي‬
‫ن ن ن ن ن ن ي دب ن ن ن ن ن ي‬ ‫"‪type="date‬ي يألني‬
‫ي ليي ‪.‬يي‬

‫‪ -32‬أ ن ننند ي ن ن ي ن ن ي ن ننن ي ن ننويط ن ن ي‬

‫لخ ص ي"‪ name="DOE_BOOK‬ي‬

‫‪5‬‬ ‫‪115‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التعرف على مكوّنات النموذج‬

‫‪32‬‬ ‫‪33‬‬ ‫‪34‬‬ ‫ي‬ ‫ي ي إل‬ ‫يمد‬ ‫ألتع ي آلن ي لن يك‬

‫(‪:)submit button‬‬

‫‪.‬‬ ‫ي لنيأد ةي‬ ‫‪ -33‬أل‬

‫ي لني ز ي‪.Add a Book‬‬ ‫‪ -34‬أل‬

‫ن ن ي يأن ن ن يي ن ن يي دين نندي‬ ‫‪ -35‬أالحن ننميين نننين ن ن ةي‬

‫لج ي آلي ‪:‬‬
‫‪<input type="submit"value="Add a‬‬
‫>‪Book"/‬‬

‫‪35‬‬ ‫‪36‬‬

‫‪ -36‬ح ن ن يي ن ننلي لخ ص ن ن ي"‪type="submit‬ي‬

‫ي‬ ‫ن ‪:‬ي ز ي م ي يم‬
‫ن ن ‪ value="Add a Book":‬ي‬

‫‪6‬‬ ‫‪116‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫استعراض قاعدة البيانات‬ ‫األول‬
‫الثانوي‬
‫‪1‬‬
‫‪library‬‬ ‫ألستعرض قاعدة البيانات‬
‫الخاصة بمشروعنا ‪:‬‬

‫‪ -1‬أفتح برنامج ‪.UsbWebServer‬‬

‫‪ -2‬أنتظ ر ر ر ررر ر ر ر ر الخ ر ر ر ررا م ‪ Apache‬و‬

‫‪ MySql‬وذل ر حت رره ر ررة ح م ر ر‬
‫(‪ )‬باللة األخضر لك ّ منهما‪.‬‬

‫‪3‬‬ ‫‪2‬‬
‫‪ -3‬أضغط الز ‪.PHPMyAdmin‬‬

‫‪4‬‬
‫‪ -4‬أالحر ر أنر ر ررو تح ررغ ا ت ر ر ح وفر ررتح‬
‫ال ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر ر‬
‫‪localhost:8080/PhpMyAdmin‬‬

‫‪1‬‬ ‫‪117‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫استعراض قاعدة البيانات‬

‫‪5‬‬ ‫‪6‬‬

‫االف ا ر ر ر ر‬ ‫‪ -5‬أ خ ر ر ر ر اف ر ر ر ررو ا ر ر ر ررت‬

‫"‪ "root‬و كلم ر ر ر ر ر ر ا ر ر ر ر ر رررو االف اض ر ر ر ر ر ر‬
‫"‪ّ ، "usbw‬‬
‫ثو‬

‫النافذة‪.‬‬ ‫‪ -6‬أضغط حلى الز ‪ ،Go‬أف‬

‫‪ -7‬اآل م ررل خر ر ا اسر ررا األ ررر‪ ،‬أض ررغط‬

‫حلى قاح ة الب انات ‪.library‬‬
‫‪7‬‬ ‫‪9‬‬ ‫‪8‬‬ ‫‪ -8‬أالحر ر أحلر ررى النافر ررذة‪ ،‬ر ر ررة م مةح ر ر‬
‫م ر ررل التبةخب ر ررات الخا ر ر ر بالت امر ر ر مر ر ر‬
‫قاحر ر ر ر ر ر ر ة الب ان ر ر ر ر ر ررات م ر ر ر ر ر ر ر التبةخر ر ر ر ر ر رب‬
‫‪ structure‬و ‪ export‬و ‪import‬‬
‫وغ ها‪.‬‬

‫‪ -9‬و ألت ررر حلررى الج ر اوا ا كةن ر لةاح ر ة‬

‫الب ان ر ر ر ر ررات‪ ،‬أض ر ر ر ر ررغط حل ر ر ر ر ررى التبةخ ر ر ر ر ررب‬
‫‪.structure‬‬

‫‪ -11‬فأف ر ررتاتج أ قاحر ر ر ة الب انر ر ررات ‪library‬‬

‫متكةن مل ج وا وح ‪ ،‬وهة ‪.books‬‬

‫‪11‬‬

‫‪2‬‬ ‫‪118‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫استعراض قاعدة البيانات‬
‫‪11‬‬ ‫‪12‬‬ ‫‪13‬‬ ‫‪ -11‬ألفررت را الجر وا ‪ books‬أضررغط حلررى‬
‫ح م ر (‪ )+‬ب انررب افررو قاح ر ة الب انررات‬
‫‪ library‬و أضغط حلى الج وا ‪،books‬‬

‫‪ -12‬فتظ ررر أحل ررى الناف ررذة بةخب ررات ج ر ر ة‬

‫خا بالت ام م الج وا املح ّ ‪.‬‬

‫‪ -13‬و ألت ر ر ررر الحة ر ر ررةا ا كةنر ر ر ر ل جر ر ر ر وا‬

‫‪، books‬أضر ر ر ر ر ر ر ررغط حلر ر ر ر ر ر ر ررى التبةخر ر ر ر ر ر ر ررب‬
‫‪.structure‬‬
‫‪ -11‬أالح حةةا الج وا اآل ‪:‬‬
‫أ‪ -‬الحة ‪ id_book‬و م كة أو مرجر‬
‫الكت ر ررا ‪ ،‬وه ر ررة حةر ر ر م ر ررل ن ر ررة رقمي ي ي‬
‫‪14‬‬ ‫ومتكة مل ‪ 1‬أ قا ‪.‬‬
‫‪15‬‬ ‫‪ -‬الحةر ر ر ر ‪ title_book‬وخم ر ر ر ر حن ر ر ررةا‬
‫الكت ر ررا ‪ ،‬وه ر ررة حةر ر ر نصي ي ي وحجمر ر ر‬
‫رر‬ ‫متغ ر ر ‪ ،‬ومتكر ررة مر ررل ‪ 25‬حر ررر‬
‫أقص ه‪.‬‬
‫ت‪ -‬الحة ر ر ر ر ر ‪ doe_book‬وخم ر ر ر ر ر ر ر ر ر ررا خ‬
‫إ ر ر ا الكت ررا ‪ ،‬وه ررة حةر ر م ررل ن ررة‬
‫تاريخ‪.‬‬
‫ث‪ -‬الحة ر ر ر ‪ copies_book‬وخم ر ر ر ح ر ر ر‬
‫نسخ الكتا ‪ ،‬وهة حة مرل نرة رقمي‬
‫ومتكة مل قم ‪.‬‬
‫‪ -15‬أم ر ر ر ر ر ررا إذا أ ت اف ر ر ر ر ر ررت راا ر ر ر ر ر ررج ت‬
‫الج وا‪ ،‬أضغط حلى التبةخب ‪browse‬‬
‫‪16‬‬
‫‪ -16‬وأالحر ر ر أنر ر ر بذمك ر رران م ر ررل خر ر ر ا ه ر ررذا‬
‫التبةخر ررب افر ررت راا و حر ررذ و ت ر ر‬
‫السج ت‪.‬‬
‫‪3‬‬ ‫‪119‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫الربط بقاعدة البيانات‬ ‫األول‬
‫الثانوي‬
‫‪1‬‬
‫‪ -1‬ألتمكن من التعامل مع جداول قاعدة‬
‫البيانات‪ ،‬ومعالجة السجالت‪ :‬كتنفيذ‬
‫)(‪Mysqli_connect‬‬ ‫استعالم حذف‪ ،‬أو إدراج‪ ،‬أو استعراض‬
‫بيانات‪ ،‬أو تحديثها؛ وجب قبل كل هذا‬
‫إنشاء ارتباط بقاعدة البيانات‪ .‬وألنش ئ‬
‫هذا االرتباط سأستخدم الدالة‬
‫) (‪ mysqli_connect‬والتي تتضمن أربع‬
‫خصائص‪:‬‬

‫عنوان الخادم ‪localhost :‬‬ ‫أ‪-‬‬

‫اسم املستخدم ‪user_name :‬‬ ‫ب‪-‬‬
‫كلمة مرور املستخدم ‪password :‬‬ ‫ج‪-‬‬
‫‪2‬‬ ‫اس م م م م م م م م م م م ممم قاع م م م م م م م م م م م ممدة البيان م م م م م م م م م م م ممات ‪:‬‬ ‫د‪-‬‬
‫‪database_name‬‬

‫‪Mysqli_connect(“localhost”,‬‬ ‫‪ -2‬فيصبح الشكل العام للدالة كاآلتي‪:‬‬

‫‪”user”,‬‬
‫‪mysqli_connect("localhost","user_n‬‬
‫;)"‪ame","password","database_name‬‬
‫‪”password”,‬‬

‫;)”‪”database‬‬

‫‪1‬‬ ‫‪120‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫الربط بقاعدة البيانات‬
‫‪ -3‬وبم م م مما أنإ م م ممي س م م ممأحتاج إ م م م اس م م ممتخدام ه م م ممذا‬
‫االرتب م مماط العدي م ممد م م ممن امل م مرات م م ال م م ممة‪،‬‬
‫س م ممأقوم بحف م م م م متم م م باس م ممم ‪ ،$con‬و‬
‫‪3‬‬ ‫أالحظ أن املتم م لممة ‪ php‬يكمون مسمبوقا‬
‫ب م ممالرم ‪ ،$‬وتص م ممبح ب م ممذلئ الجمل م ممة ال هائي م ممة‬
‫العامة للربط بقاعدة البيانات كاآلتي‪:‬‬
‫‪$con=Mysqli_connect(“localhost”,‬‬ ‫(‪$con=mysqli_connect‬‬
‫‪”user”,‬‬ ‫‪"localhost","user_name","password","Datab‬‬
‫‪”password”,‬‬ ‫;)"!!‪ase_name") or die ("connection error‬‬

‫)”‪”database‬‬ ‫‪ -4‬ت در اإلشارة إ أن العبارة األخ ة‪:‬‬

‫;)”!!‪or die (“connection error‬‬
‫)’!!‪ Or die (‘connection error‬يقصمد‬
‫به م م م م م م م م م م م م م م م م م مما إ م م م م م م م م م م م م م م م م م ممار الرس م م م م م م م م م م م م م م م م م ممالة‪:‬‬
‫"!!‪ "connection error‬م م ح ممال فش ممل‬
‫االتصال بقاعدة البيانات‪.‬‬
‫‪4‬‬
‫وبم مما أن م م مش ممروى س ممأعتمد ع م الق مميم‬
‫اآلتية‪:‬‬
‫أ‪ .‬عنوان الخادم ‪"localhost":‬‬
‫ب‪ .‬اسم املستخدم‪"root" :‬‬
‫ج‪ .‬كلم م م م م ممة امل م م م م ممرور‪ ( "usbw":‬م م م م م ح م م م م ممال‬
‫استخدام برم ية ‪.UsbWebServer‬‬
‫د‪ .‬اسم قاعدة البيانات ‪"library" :‬‬
‫‪5‬‬ ‫ً‬
‫‪ -5‬إذا تصبح جملة الربط كاآلتي ‪:‬‬
‫(‪$con=mysqli_connect‬‬
‫)"‪"localhost","root","usbw","library‬‬
‫;)"!!‪or die ("connection error‬‬

‫‪2‬‬ ‫‪121‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫الربط بقاعدة البيانات‬

‫‪6‬‬ ‫‪ -6‬و بما أنإي سأحتاج إ الربط بقاعدة‬

‫البيانات العديد من املرات‪ ،‬فإنإي‬
‫سأحفظ هذه التعليمات ملف ‪php‬‬
‫منفصل باسم "‪. "connect.php‬‬

‫‪7‬‬

‫‪ -7‬وأستدعي كلما دعت الحاجة إ ذلئ‪،‬‬

‫عن طريق الجملة اآلتية‪:‬‬

‫;)'‪include ('connect.php‬‬

‫‪3‬‬ ‫‪122‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫توظيف اجلملة الشرطية للتأكد من‬ ‫األول‬
‫الربط بقاعدة البيانات‬ ‫الثانوي‬

‫‪1‬‬
‫توظي ففلجملة ا ففطجم ل ففكديطج الرب ف ج ف جم ففك ج‬
‫بقاع ةجم بيانات‪:‬‬

‫‪ -1‬للتأكد د ل ددب ال ددلبي نات د د ال ت ددت‬

‫جملة شلط ة تظهل اللستلة‪:‬‬
‫‪ "connection done…" -‬فددح لتلددة‬
‫تد د د ددا اةتاد د د ددت نات د د د د ال ت د د د ددت‬
‫ننجتح‪.‬‬
‫‪ "connection failed!!!" -‬فددح لتلددة‬
‫فشل اةتات نات ال ت ت ‪.‬‬

‫‪2‬‬

‫‪ -2‬و تك ددال الا د مة الجتل ددة لطيمل ددة الش ددلط ة‬

‫كتآلتي‪:‬‬
‫)‪If (criteria‬‬
‫‪{ /* statements if criteria is true */‬‬
‫; ‪php-instruction1; .....‬‬
‫} ;‪php- instruction n‬‬
‫‪Else‬‬
‫‪{ /* statements if criteria is false */‬‬
‫; ‪php- instruction1; ....‬‬
‫} ;‪php- instruction n‬‬

‫‪1‬‬ ‫‪123‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫توظيف اجلملة الشرطية للتأكد من‬
‫الربط بقاعدة البيانات‬

‫‪3‬‬ ‫‪ -3‬ولتاظ د اليمل ددة الش ددلط ة لل ّ‬

‫تحاد د ل ددب‬
‫الددلبي نات د ال ت ددت حج د وة تح ح د‬
‫املج ت ‪ criteria‬كتآلتي ‪:‬‬
‫إذا (لا حاع اتات نات ال ت ت ) ج‬
‫أنفذجمآلتي‪ :‬ج‬
‫}جأظهكجم كسا طج"!!!‪ {"connection failed‬ج‬

‫وإالج‪*/‬ع ف ف ف شجت ق ف ف ف جم لف ف ففك جيعن ف ف ف جو ف ف ف ج‬

‫مالتصالجبقاع ةجم بيانات*‪ /‬ج‬
‫أنفذجمآلتي‪:‬ج ج‬
‫}جأظهكجم كسا طج"!!!‪{"connection done‬‬
‫‪4‬‬ ‫‪ -4‬تلجاجهذهجملة لجإلىج غطج‪php‬ج‪:‬‬
‫ج‬
‫‪ */‬عال طجم لعةبج!جهناجتفي جم نفي*‪If (!$con) /‬‬
‫{‬
‫; "!!!‪echo "connection failed‬‬
‫}‬
‫‪Else‬‬
‫{‬
‫;"‪echo "connection succeeded.‬‬
‫}‬

‫‪2‬‬ ‫‪124‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫توظيف اجلملة الشرطية للتأكد من‬
‫الربط بقاعدة البيانات‬

‫‪8‬‬ ‫‪6‬‬
‫‪ -5‬جد ددلي تا د د اليملد ددة الشد ددلط ة ولد ددذل‬
‫سأل ث خلال فح اةتات نات ال ت دت‬
‫لب خال تم ير اسمهت فح لل كتآلتي‬
‫‪ -6‬لددب خددال نل ددتل ‪ Flash Develop‬فددت‬
‫املل ‪.connect.php‬‬
‫‪ -7‬غيددر اسددا ةت د ال ت ددت لددب ‪ library‬إلد‬
‫‪( libary‬نحذف للف ‪ r‬بج للف ‪.)b‬‬

‫و غلاه‪.‬‬ ‫‪ -8‬لفظ املل‬

‫‪11‬‬ ‫‪9‬‬
‫فت املل‬ ‫‪ -9‬لب خال املتاف‬
‫‪localhost:8080/library/php/connect.php‬‬

‫‪ -01‬فتظهد ددل سد ددتلة خاد ددأ اةتاد ددت نات د د‬

‫ال ت ت (!!!‪)connection failed‬‬

‫‪3‬‬ ‫‪125‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫توظيف اجلملة الشرطية للتأكد من‬
‫الربط بقاعدة البيانات‬

‫‪11‬‬ ‫‪9‬‬
‫ال ت ت لب ج ح ‪.‬‬ ‫ّ اسا ةت‬ ‫‪-11‬‬

‫‪ -12‬لفظ املل ‪.connect.php‬‬

‫‪11‬‬ ‫‪11‬‬

‫‪ -01‬فد د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د ددت املل د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د د‬

‫‪localhost:8080/library/connect.php‬‬

‫‪ -41‬فتظهد د ددل سد د ددتلة جد د ددتح اةتاد د ددت نات د د د‬

‫ال ت ت ج(‪)connection succeeded.‬‬

‫‪4‬‬ ‫‪126‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫إنشاء منوذج لصفحة إدراج سجل‬ ‫األول‬
‫الثانوي‬

‫‪ -1‬سأقوم بتصميم النموذج الخاص بإدراج‬

‫‪1‬‬ ‫سجل جديد في جدول ‪ books‬على أن‬
‫يظهر بالشكل املوضح في الصورة‪،‬‬
‫ويحتوي العناصر اآلتية ‪:‬‬
‫مربع نص إدخال كود الكتاب مسبوقا‬ ‫أ‪-‬‬
‫بالعنوان ‪.Enter Book ID‬‬
‫مربع نص إدخال اسم الكتاب مسبوقا‬ ‫ب‪-‬‬
‫بالعنوان ‪.Enter Book Title‬‬
‫مربع نص إدخال تاريخ إصدار الكتاب‬ ‫ت‪-‬‬
‫مسبوقا بالعنوان ‪.Date of Edition‬‬
‫مربع نص إدخال عدد نسخ الكتاب‬ ‫ث‪-‬‬
‫مسبوقا بالعنوان ‪.Number of copies‬‬
‫زر إرسال البيانات بعنوان ‪Add a‬‬ ‫ج‪-‬‬
‫‪.Book‬‬
‫‪2‬‬ ‫‪3‬‬ ‫ا‬
‫وإلنجاز ذلك أخطط أول لختيار اسم مللف‬
‫الـ ‪ php‬الذي سيحتوي التعليمات البرمجية‬
‫الخاصة بإدراج سجل‪ ،‬وهو كاآلتي‬
‫"‪ "MyInsertQuery.php‬وطريقة إرسال‬
‫البيانات و هي الطريقة ‪.post‬‬

‫‪ -2‬من خالل برنامج ‪ ، Flash Develop‬أفتح‬

‫امللف "‪."MyInsertForm.html‬‬
‫‪ -3‬بعد العالمة >‪،<body‬‬

‫‪1‬‬ ‫‪127‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة إدراج سجل‬

‫أدرج عالمة بدء النموذج و خصائصها‬‫‪ُ -4‬‬

‫‪4‬‬
‫والتي ستكون كاآلتي ‪:‬‬
‫"‪<form action="MyInsertQuery.php‬‬
‫>"‪method="post‬‬

‫‪ -5‬أدرج العالمة >‪<p‬‬

‫‪ -6‬أدخل النص ‪Enter Book ID :‬‬

‫‪ -7‬ثم أدرج مربع النص الخاص بكود الكتاب‬
‫‪،‬وذلك بإدراج العالمة ‪ <input‬متبوعة بـ ‪:‬‬
‫أ‪ -‬خاصية "‪، type="number‬‬
‫للدللة على أن البيانات في مربع‬
‫النص ستكون رقمية‪.‬‬
‫‪6‬‬ ‫‪7‬‬ ‫‪8‬‬
‫ب‪ -‬خاصية"‪ name="ID_BOOK‬وذلك‬
‫إلسناد اسم ملربع النص‪.‬‬
‫‪5‬‬ ‫‪ -8‬أدخل رمز أكبر من (>)‪ ،‬إلغالق عالمة‬
‫‪ input‬فتكون تركيبة عالمة ‪input‬‬
‫النهائية كاآلتي ‪:‬‬
‫"‪<input type="number‬‬
‫>‪name="ID_BOOK"/‬‬

‫مع العلم أن عالمة ‪ input‬هي عالمة فردية‪،‬‬

‫يعني أنه ليس لها عالمة إغالق>‪</input‬‬

‫‪2‬‬ ‫‪128‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة إدراج سجل‬

‫‪9‬‬ ‫‪11‬‬ ‫‪ -9‬ســأدرج اآلن عنــوان و مربــع الــنص الخــاص‬

‫بإدخال عنوان الكتاب‪ ،‬على النحو اآلتي‪:‬‬
‫أ‪ -‬أدرج أول العالمة >‪.<p‬‬
‫ب‪ -‬أدرج النص ‪.Enter Book Title:‬‬
‫‪ -11‬أدرج مرب ــع ن ــص عن ــوان الكت ــاب‪ ،‬وذل ــك‬
‫ب ـ ـ ـ ــإدراج العالم ـ ـ ـ ــة ‪ <input‬متبوع ـ ـ ـ ــة ب ـ ـ ـ ـ ـ ‪:‬‬
‫خاصـ ـ ـ ــية "‪ ، type="text‬بمـ ـ ـ ــا أن مربـ ـ ـ ــع‬
‫وخاص ـ ـ ــية‬ ‫ال ـ ـ ــنص س ـ ـ ــيحتوي نص ـ ـ ــا‬
‫"‪name="TITLE_BOOK‬‬
‫‪ -11‬أغل ـ ـ ـ عالمـ ـ ــة ‪ ، input‬وتكـ ـ ــون تركيبـ ـ ــة‬
‫العالمة ‪ input‬النهائية كاآلتي ‪:‬‬
‫>"‪<input type="text" name=" TITLE_BOOK‬‬
‫‪11‬‬
‫‪ -12‬س ـ ـ ـ ــأدرج اآلن عن ـ ـ ـ ــوان و مرب ـ ـ ـ ــع ال ـ ـ ـ ــنص‬
‫الخاص بإدخال تاريخ إصدار الكتاب‪:‬‬
‫‪12‬‬ ‫‪13‬‬ ‫أ‪ -‬أدرج العالمة >‪ ، <p‬ثم‬
‫ب‪ -‬أدخل النص " ‪"Date of Edition :‬‬
‫‪ -13‬أدرج مرب ــع ن ــص ت ــاريخ إص ــدار الكت ــاب‪،‬‬
‫وذلك بإدراج العالمة ‪ <input‬متبوعة بـ ‪:‬‬
‫أ‪ -‬خاص ــية "‪ ، type="date‬بم ــا أن مرب ــع‬
‫النص سيحتوي تاريخا‪.‬‬
‫ب‪ -‬و خاصية "‪name="DOE_BOOK‬‬
‫‪ -14‬أغل ـ ـ ـ ـ عالمـ ـ ـ ــة ‪ input‬وتكـ ـ ـ ــون تركيبـ ـ ـ ــة‬
‫العالمة ‪ input‬النهائية كاآلتي ‪:‬‬
‫>‪<input type="date" name="DOE_BOOK"/‬‬

‫‪14‬‬

‫‪3‬‬ ‫‪129‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة إدراج سجل‬

‫‪ -15‬ســأدرج اآلن عنــوان ومربــع الــنص الخــاص‬

‫‪15‬‬ ‫‪16‬‬
‫بإدخال عدد نسخ الكتاب‪:‬‬
‫أ‪ -‬أدرج العالمة >‪.<p‬‬
‫ب‪ -‬أدخل النص ‪Number of Copies :‬‬
‫‪ -16‬أدرج مربع نص عدد نسخ الكتـاب ‪،‬وذلـك‬
‫بإدراج العالمة ‪ <input‬متبوعة بـ ‪:‬‬
‫أ‪ -‬خاص ــية "‪ ، type="number‬بم ــا أن‬
‫مربع النص سيحتوي عددا‬
‫ب‪ -‬و خاص ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــية‬
‫"‪name="COPIES_BOOK‬‬
‫‪ -17‬أغلـ ـ ـ ـ ـ عالم ـ ـ ـ ــة ‪ input‬وتك ـ ـ ـ ــون تركيب ـ ـ ـ ــة‬
‫‪18‬‬ ‫العالمة ‪ input‬النهائية كاآلتي ‪:‬‬
‫‪17‬‬
‫>‪<input type="number" name="COPIES_BOOK"/‬‬
‫‪ -18‬أدرج سطرا فارغا >‪.<br/‬‬
‫‪21‬‬ ‫‪19‬‬ ‫ُ‬
‫‪ -19‬ثــم أدرج أخ ـرا زر إرســال البيانــات‪ ،‬و هــو‬
‫م ـ ــن ن ـ ــو ‪ ، submit‬و أخت ـ ــار ل ـ ــه العن ـ ــوان‬
‫"‪ ، "Add a Book‬فتكــون جملــة ‪input‬‬
‫كاآلتي ‪:‬‬
‫>‪<input type="submit" value="Add a Book "/‬‬
‫ألح ـ ــص أن خاص ـ ــية ‪ value‬اس ـ ــتخدميها لت ي ـ ــر‬
‫عنوان الزر‪.‬‬
‫‪ -02‬اآلن و ق ـ ـ ـ ـ ــد انيهي ـ ـ ـ ـ ـ م ـ ـ ـ ـ ــن إدراج كاف ـ ـ ـ ـ ــة‬
‫العناصــر املطلو‪،‬ــة‪ ،‬أتأكــد مــن وجــود عالمــة‬
‫إغالق النموذج >‪</form‬‬
‫‪ -21‬أحفص امللف‬
‫‪21‬‬

‫‪4‬‬ ‫‪130‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة إدراج سجل‬

‫‪ -22‬أنتقل إلى املتصفح ‪. Google chrome‬‬

‫‪22‬‬ ‫‪23‬‬ ‫‪24‬‬
‫‪ -23‬أدخل عنوان الصفحة كاآلتي‪:‬‬
‫‪localhost:8080/library/php/MyInsertForm.html‬‬
‫‪ -24‬ألح ــص مختل ــف مكون ــات النم ــوذج الت ــي‬
‫أدرجيها‪.‬‬

‫‪5‬‬ ‫‪131‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫تعليمات ‪ php‬إلدراج سجل جديد‬ ‫األول‬
‫الثانوي‬
‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬
‫اااا‬ ‫اااا‬ ‫ألدرج التعليما ا ا ا إل الة سجي ا ا ا ا‬
‫جديد‪:‬‬

‫‪ -1‬سااال ا برن ا س ‪ ، Flash Develop‬أ اات‬

‫امللف ‪.MyInsertQuery.php‬‬

‫‪ -2‬بعد ع س بدء تعليم إل ‪<?php‬‬

‫‪ -3‬أد ا جملا اعاتدع ء سلااف الاردة ب عااد‬

‫البي ن ا ا ا إل امل ا ا ا "‪ ،"connect.php‬عا ا ااال‬
‫طريق الدال )(‪ include‬ك آلتي ‪:‬‬

‫;)'‪include('connect.php‬‬

‫‪4‬‬ ‫‪5‬‬ ‫‪ -4‬عأنشا ا اآلا اتعااتع ذ الااكن عاايم سااال‬

‫إدراج ا ا ا جديا ا ااد‪ ،‬ي ا ا ا إن ا ا ا ع ا ا ا سر‬
‫الخ دذ بعم اآلتي‪:‬‬
‫‪Insert into the books table these‬‬
‫)‪values (value1, ……. , value n‬‬

‫‪ -5‬وه ااكي ال ااي ل اات نل ا ا البي نا ا إل ال ا ا ا ا‬

‫إد ل ا ا ا اات ال م ا ا ج‪ ،‬ود ا ا له ر ي ا ا ا اات‬
‫ال دو ‪.‬‬

‫‪1‬‬ ‫‪132‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬إلدراج سجل جديد‬

‫‪6‬‬ ‫‪ -6‬و ا ا أع ا ااتذي اع ا اات داذ ه ا ااكي البي ن ا ا إل‬

‫ع ا ا ا ااأط ذ بالد ا ا ا ا ا ع ا ا ا ااال طريا ا ا ا ااق الدالا ا ا ا ا‬
‫‪ $_REQUEST‬م ا ا ا اال إ ا ك نا ا ا ا ا ال يما ا ا ا ا‬
‫املد لا اات سر ا نااا امل ا ‪،ID_BOOK‬‬
‫ال ااكن يمل ا ك ا د ال ت ا ‪ ،‬ل اات ‪ ،9999‬ا ا‬
‫هكي ال يم لال أعتذي اعات داس إت إ ا‬
‫ا ا ا ا لد ا ا ا ا س ا ا ااال سر ا ا ا ا الا ا ا ا ا كا ا ا ا آلتي ‪:‬‬
‫']‪'$_REQUEST[ID_BOOK‬‬
‫عأ رج هكي ال مل إلى جمل ‪ sql‬تصب ‪:‬‬
‫‪insert into books‬‬
‫‪values('$_REQUEST[ID_BOOK]',‬‬
‫‪'$_REQUEST[TITLE_BOOK]',‬‬
‫‪'$_REQUEST[DOE_BOOK]',‬‬
‫;)']‪'$_REQUEST[COPIES_BOOK‬‬
‫صيا‪،‬‬ ‫ال مل اآلا بيا ع س‬ ‫‪ -7‬عأ‬
‫‪ -8‬وأ لد ا ا اات ستغيا ا ب عا ا ‪ $sql‬ل طتصا ا ر‬
‫علااى اعااتدع وض عا ة إعا د جت با ال ملا‬
‫ك سل كلم دع الح ج لكلك‪.‬‬

‫‪8‬‬ ‫‪7‬‬

‫‪2‬‬ ‫‪133‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬إلدراج سجل جديد‬

‫‪9‬‬
‫‪ -9‬تصب ال مل الن وي ك آلتي ‪:‬‬
‫‪$sql = " insert into books‬‬
‫‪values('$_REQUEST [ID_BOOK]',‬‬
‫‪'$_REQUEST [TITLE_BOOK]',‬‬
‫‪'$_REQUEST [DOE_BOOK]',‬‬
‫; " )']‪'$_REQUEST [COPIES_BOOK‬‬

‫‪ -11‬ع ا ا ااأط ذ اآلا بال لي ا ا ااك اتعا ا ا ااتع ذ‪ ،‬أدرج‬

‫الدال ‪:‬‬
‫‪mysqli_query($con,$sql) or die ("error‬‬
‫;)"!‪query‬‬
‫أت ظ أا هكي الدال أتي سصح د‬
‫بمتغي يال‪:‬‬
‫ط عد‬ ‫‪ ‬املتغي األو (‪ )$con‬يمل‬
‫البي ن إل امل ت دس لي ‪،‬‬
‫‪ ‬واملتغي الل ني (‪ )$sql‬يمل جمل‬
‫الا ‪ SQL‬ال عيت ليكه على ط عد‬
‫البي ن إل‪.‬‬
‫ال زء الل ني سال هكي ال مل‬ ‫بي م يم‬
‫)”!‪ or die (“error query‬سال إظ ر‬
‫‪11‬‬ ‫ش‬ ‫الرع ل "!‪ "error query‬ت‬
‫ليك اتعتع ذ‪.‬‬

‫‪3‬‬ ‫‪134‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬إلدراج سجل جديد‬

‫‪ -11‬وأل أجا ا ا ااد اآلا سا ا ا ااال نج ا ا ا ا عملي ا ا ا ا إدراج‬

‫الس ا أو ش اال ع ااأط ذ ب ظ ا ر رع ا ل‬
‫بيا لك‪ ،‬عال طريق ال مل اآل ي ‪:‬‬
‫"= ‪echo"Record Inserted‬‬
‫;(‪.mysqli_affected_rows($con‬‬
‫أت ظ أا نا الرع ل يتك ا سال جزأيال‪،‬‬
‫امل ج د بيا ع س‬ ‫وه‬ ‫جزء ث ب‬
‫الت صيا "= ‪ ،"Record Inserted‬ث‬
‫جزء س ب ق ب ذ ‪ ،‬واملتمل ت الدال‬

‫‪11‬‬ ‫)‪mysqli_affected_rows($con‬‬
‫‪14‬‬
‫عدد الس إل املتأثر‬ ‫ووظيلت‬
‫ب تعتع ذ‪ ،‬تك ا الرع ل ك آلتي ‪:‬‬
‫‪Record Inserted = number_of_affected_rows‬‬

‫ق اتر با ا ا ة ب ع ا ااد‬ ‫‪ -12‬وأ يا ا ا ا أطا ا ا ذ با ا ا‬

‫البي ن إل ك آلتي‪:‬‬
‫;)‪mysqli_close($con‬‬
‫‪ -13‬أ أجا ااد سا ااال وج ا ا د ع س ا ا لا ااق تعليم ا ا إل‬
‫‪ php‬ك آلتي‪?> :‬‬
‫‪ -14‬أ لظ امللف‪.‬‬

‫‪13‬‬ ‫‪12‬‬

‫‪4‬‬ ‫‪135‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫التأكد من عملية تنفيذ إدراج سجل جديد‬ ‫األول‬
‫الثانوي‬

‫دد د ي ا ي دد د ي‬ ‫التأك د ددلية د ددإيراج د د د ي‬

‫جليل‪:‬‬

‫ألتأكد من صحة التعليمات البرمجية‬

‫إلدراج سجل جديد‪ ،‬سأقوم بإدخال بيانات‬
‫جديدة في نموذج إدراج سجل جديد‪،‬‬
‫وأتأكد من ظهور الرسالة ‪“Record :‬‬
‫”‪Inserted = 1‬يإثر الضغط على الزر ‪Add‬‬
‫‪ ، a Book‬ثم أتأكد من إدراج السجل‬
‫الجديد في الجدول ‪ books‬ضمن قاعدة‬
‫البيانات‪.‬‬
‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫و لعمل هذا أقوم باآلتي‪:‬‬

‫‪ -1‬أفتح املتصفح ‪.Google Chrome‬‬

‫‪ -2‬أدخل العنوان ‪:‬‬
‫‪localhost:8080/library/php/InsertForm.html‬‬

‫‪ -3‬أدخل البيانات اآلتية ضمن النموذج‪:‬‬

‫‪ID_BOOK :1234‬‬
‫‪TITLE_BOOK : Learn PHP‬‬
‫‪DOE_BOOK : 10/10/2014‬‬
‫‪COPIES_BOOK : 3‬‬

‫‪ -4‬أضغط اآلن على الزر ‪.Add a Book‬‬

‫‪4‬‬

‫‪1‬‬ ‫‪136‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التأكد من عملية تنفيذ إدراج سجل جديد‬

‫‪5‬‬
‫‪ -5‬أالحظ ظهور الرسالة ‪:‬‬
‫”‪ “Record Inserted = 1‬حيث تبين أنه تم‬
‫إدراج سجل واحد في قاعدة البيانات‪.‬‬

‫‪6‬‬ ‫‪7‬‬ ‫‪8‬‬ ‫‪9‬‬ ‫سأتأكد اآلن أنه تم إدراج هذا السجل‬
‫بالفعل في الجدول ‪ books‬نفسه‪ ،‬ولعمل‬
‫ذلك أقوم باآلتي‪:‬‬

‫‪ -6‬أفتح املتصفح ‪. Google Chrome‬‬

‫‪ -7‬أدخ ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل للل العن ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل للوان‬

‫‪localhost:8080/phpmyadmin/‬‬

‫‪ -8‬أتأكد من إدخال اسم املستخدم و كلمة‬

‫املرور‪.‬‬
‫‪ -9‬أضغط على الزر ‪.Go‬‬

‫‪2‬‬ ‫‪137‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التأكد من عملية تنفيذ إدراج سجل جديد‬

‫‪11‬‬

‫‪ -11‬أضغط من اإلطار األيسر على عالمة‬

‫(‪ )+‬بجانب قاعدة البيانات ‪.Library‬‬

‫‪11‬‬ ‫‪12‬‬ ‫‪13‬‬

‫‪ -11‬أضغط على الجدول ‪.books‬‬

‫‪ -12‬أضغط على التبويب ‪.browse‬‬

‫‪ -13‬و أالح ل للظ ف ل للي س ل للجالت الج ل للدول‪ ،‬وج ل للود‬

‫الس ل للجل الجدي ل للد ال ل للذ تمل ل ل إض ل للافته‬
‫مسبقا‪.‬‬

‫‪3‬‬ ‫‪138‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫إنشاء منوذج لصفحة حذف سجل‬ ‫األول‬
‫الثانوي‬

‫‪ -1‬سأقوم بتصميم النموذج الخاص بحذف‬

‫سجل من دنل ا البتن ‪ ،books‬علن ن‬
‫‪2‬‬ ‫‪1‬‬ ‫يظه ن ن ننمل بالف ن ن ن ل ا و ن ن ن ن ن ن الص ن ن ننو ‪،‬‬
‫يحتوي العناصمل اآلتية ‪:‬‬

‫ن‪ -‬العنوا ‪.Enter Book ID:‬‬

‫ب‪ -‬مملب ن ننا ن ننت ب ن نناا مملد ن ننا البت ن نناب‬
‫الذي سأحذفه‪.‬‬
‫ج‪ -‬ز ب سناا الييا ناب نعننوا ‪Delete‬‬
‫‪.Book‬‬
‫‪ -2‬نالحظ هنا ن حذف سجل كتاب مح دنل ‪،‬‬
‫يقتصن ننمل عل ن ن ب ن نناا ال ن ننو الخن نناص بن ننه‬
‫فقن ن ‪ ،‬ث ننم نق ننوم ب نمي ننذ عم ي ننة ال ننذف‬
‫بالضغ عل الز ‪.Delete Book‬‬
‫ا‬
‫‪3‬‬ ‫‪4‬‬ ‫‪5‬‬
‫ن ال ال تي ننا اس ننم ن‬ ‫أل ج ننز ذل ننخ س ننأ‬
‫ال ن ن ‪ php‬الن ننذي سن ننيحتوي التع يمن نناب ال مجين ننة‬
‫الخاص ن ن ن ن ن ن ن ن ن ن ننة بح ن ن ن ن ن ن ن ن ن ن ننذف س ن ن ن ن ن ن ن ن ن ن ننجل ه ن ن ن ن ن ن ن ن ن ن ننو‬
‫"‪ "MyDeleteQuery.php‬طمليقن ننة ب سن نناا‬
‫الييا اب ه ال مليقة ‪:get‬‬
‫‪ -3‬م ن ن ن ن ا بمل ن ننام ‪، Flash Develop‬‬
‫افتح ا "‪"MyDeleteForm.html‬‬
‫‪ -4‬نعل الع مة >‪، <body‬‬
‫‪ -5‬ن ج ع مننة ب ننلو النم ننوذج ال ن س ننت و‬
‫كاآلتي‪:‬‬
‫"‪<form action="MyDeleteQuery.php‬‬
‫>"‪method="get‬‬

‫‪1‬‬ ‫‪139‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة حذف سجل‬

‫أدرج اآلن عنوان و مربع نص كود الكتاب‪:‬‬

‫‪ -6‬ن ج الع مة >‪<p‬‬

‫‪ -7‬ن ل النت ‪Enter Book ID :‬‬
‫‪ -8‬ن ج مملبننا ننت كننو البتنناب ‪ ،‬ذلننخ ب ن اج‬
‫الع مة ‪ <input‬متيوعة بن ‪:‬‬
‫ن‪ -‬اصية"‪type="number‬‬
‫ب‪ -‬اصية"‪name="ID_BOOK‬‬

‫‪ -9‬نغ ننة ع م ننة ‪ input‬ت ننو تملكيي ننة ع م ننة‬

‫‪ input‬النهائية كاآلتي ‪:‬‬
‫‪7‬‬ ‫‪8‬‬ ‫‪9‬‬ ‫"‪<input type="number‬‬
‫>‪name="ID_BOOK"/‬‬

‫‪6‬‬ ‫‪ -11‬ثم نعل الع مة >‪، </p‬ن ج الع منة >‪<br‬‬

‫‪11‬‬ ‫إل اج س مل دليل‪.‬‬
‫‪ -11‬ن ج ز ب سنناا الييا نناب ‪ ،‬لننذلخ ن ننل‬
‫الع مة ‪ <input‬متيوعة بن ‪:‬‬
‫ن‪ -‬الخاصية "‪type="submit‬‬
‫ب‪ -‬الخاصية "‪value="Delete Book‬‬

‫‪ -12‬نغ ننة ع مننة ‪ input‬ت ننو تملكييننة ع مننة‬

‫‪ input‬النهائية كاآلتي‪:‬‬
‫‪<input type="submit" value="Delete‬‬
‫>‪Book"/‬‬

‫‪ -11‬اآل قننل ا يهين من ب اج كافننة العناصننمل‬

‫ا وبننة‪ ،‬نتأكننل م ن د ننو ع مننة بغ ن‬
‫‪13‬‬ ‫‪11‬‬ ‫‪12‬‬
‫النموذج >‪</form‬‬

‫‪2‬‬ ‫‪140‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة حذف سجل‬

‫‪14‬‬
‫‪ -14‬نحمظ ا‬

‫‪15‬‬ ‫‪16‬‬ ‫‪17‬‬

‫‪ -15‬ن تقل بل ا تصمح ‪.Google chrome‬‬

‫‪5‬‬ ‫‪ -16‬ن ل عنوا الصمحة كاآلتي‪:‬‬
‫‪Localhost:8080/library/php/MyDeleteForm.html‬‬

‫م و اب النموذج ال‬ ‫‪ -11‬نالحظ مخت‬

‫ن ديها‪.‬‬

‫‪3‬‬ ‫‪141‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬حلذف سجل‬ ‫األول‬
‫الثانوي‬
‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬
‫ألدرج التعليمات البرمجية لحذف سجل‪:‬‬

‫‪ -1‬من ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن برن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ن ننام‬

‫‪ ، Flash‬أف ن ن ننت امللن ن ن ن‬ ‫‪Develop‬‬
‫‪.MyDeleteQuery.php.‬‬

‫‪ -2‬بعد ع مة بدء تعليمات ‪<?php‬‬

‫‪ -3‬أد ن ن ننل دملن ن ننة ا ن ن ننتدعاء مل ن ن ن الن ن ننر‬

‫بقاعن ن ن ن ن ن ن ن ن ن ن نند ال يانن ن ن ن ن ن ن ن ن ن ن ننات امل ن ن ن ن ن ن ن ن ن ن ن ن‬
‫"‪ ، "connect.php‬عن ن ن ارةن ن ن الدال ن ننة‬
‫)(‪ include‬كاآلتي ‪:‬‬

‫;)'‪include('connect.php‬‬

‫‪4‬‬

‫‪ -4‬أنشنناآل اآلال اع ننتع الننذ ننيم‬

‫م ن ا ننذف الد ننجل م ن د نند ال ت ن ‪،‬‬
‫ايث إن آمر الخاد بعمل اآلتي‪:‬‬

‫‪Delete from table_name‬‬

‫‪where field_id is equal to value_id‬‬

‫‪1‬‬ ‫‪142‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬حلذف سجل‬

‫أتردم هذه الجملة إلى دملة ‪ sql‬فتص‬

‫‪delete from books‬‬

‫‪where‬‬

‫']‪id_book = '$_REQUEST[ID_BOOK‬‬

‫‪ -5‬أضن ن ن ن ن ن الجمل ن ن ن ن ننة اآلال بن ن ن ن ن ن ال ع م ن ن ن ن ن ن‬

‫ت صيص‪،‬‬

‫‪ -6‬أافظهن ن ن ن ن ننا ن ن ن ن ن ن متغ ن ن ن ن ن ننر با ن ن ن ن ن ننم ‪$sql‬‬

‫ل قتصننار عاننى ا ننتدعااد ع ن إعنناد‬
‫كتابننة الجملننة كاملننة كلمننا دعننج الحادننة‬
‫لذلك‪.‬‬

‫‪6‬‬ ‫‪5‬‬

‫‪2‬‬ ‫‪143‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬حلذف سجل‬

‫‪7‬‬
‫‪ -7‬فتص الجملة النهااية كاآلتي ‪:‬‬
‫‪$sql‬‬ ‫‪= "delete from books‬‬
‫‪where‬‬
‫;"']‪id_book = '$_REQUEST[ID_BOOK‬‬

‫‪ -8‬ن ننأق اآلال ب فين ننذ اع ن ننتع ‪ ،‬فن ننأدرج‬

‫الدالة‪:‬‬
‫;)"‪mysqli_query($con,$sql) or die ("error query‬‬

‫أعا ن ن نند أال ه ن ن ننذه الدال ن ن ننة ت ن ن ننأتي م ن ن ننح ة‬

‫بمتغ ري ‪:‬‬

‫‪ ‬املتغ ن ننر األ (‪ )$con‬يمث ن ننل قاع ن نند‬

‫ال يانات امل تخدمة االيا‪.‬‬

‫‪ ‬املتغ ن ننر الثن نناني (‪ )$sql‬يمثن ننل دملن ننة‬

‫ال ن ن ن ‪ SQL‬ال ن ن ن ن ن نيتم ت في ن ننذها عا ن ننى‬
‫قاعد ال يانات‪.‬‬

‫الجزء الثاني م هذه الجملة‬ ‫بي ما يم‬

‫)”‪or die (“error query‬‬

‫‪8‬‬ ‫من إههننار الر ننالة "‪ "error query‬ن اننا‬
‫فشل ت فيذ اع تع ‪.‬‬

‫‪3‬‬ ‫‪144‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬حلذف سجل‬

‫‪ -9‬ألتأك ن ن ن نند اآلال م ن ن ن ن نج ن ن ن ننا عملي ن ن ن ننة إدراج‬

‫الد ننجل أ فش ننلها ن ننأق ب هه ننار ر ننالة‬
‫ت ال ذلك‪ ،‬ع ارة الجملة اآلتية ‪:‬‬
‫‪echo"Record Deleted " .‬‬
‫;(‪mysqli_affected_rows($con‬‬
‫أعانند أال نننص الر ننالة يتز ن ال م ن د نزأي ‪،‬‬
‫د ن ن ننزء ااب ن ن ننج هن ن ن ن امل د ن ن ن د بن ن ن ن ال ع م ن ن ن ن‬
‫الت صنيص "= ‪ ،"Record Deleted‬انم دنزء‬
‫ق ب قطة‪ ،‬املتمثل الدالة‪:‬‬ ‫م‬
‫‪9‬‬ ‫)‪mysqli_affected_rows($con‬‬

‫هيفتهن ننا ا ن ننا عن نندد الدن ننج ت املتن ننأار‬

‫‪12‬‬
‫باع تع ‪ ،‬فتز ال الر الة كاآلتي ‪:‬‬
‫‪Record Deleted = number_of_affected_rows‬‬

‫‪ -11‬أ ن نرا أقن ن بن ن ق ق اعرت ننا بقاع نند‬

‫ال يانات كاآلتي ‪:‬‬
‫;)‪mysqli_close($con‬‬
‫‪ -11‬أتأك نند من ن دن ن د ع م ننة قلن ن تعليم ننات‬
‫‪ php‬كاآلتي‪?> :‬‬
‫‪ -12‬أافد املل ‪.‬‬

‫‪11‬‬ ‫‪11‬‬

‫‪4‬‬ ‫‪145‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التأكد من عملية تنفيذ حذف سجل‬ ‫األول‬
‫الثانوي‬

‫أأ ع ل أأ ع‬ ‫ألتأ أأن أ أأتعليعا أ أ أ أ أ أ ع‬

‫عب أإدخ أ لعك دع ك أ ع‬ ‫ل أأسجع أ أ أ أ أ ع‬
‫و تن تع‬ ‫ملر دعحسفهعفيعن ذجعحسجع أ‬
‫ليعظه رع رس ‪ :‬ع‬

‫ع‬ ‫ع‬ ‫‪ Record Deleted = 1‬عإثرع ض أ أ أ أ‬

‫زرع‪ Delete Now‬ع عثمع ت أأن أأتعليع خ أ أ ع‬
‫س أ أ أ أ أ عليعجأأتولع‪books‬عض أ أ أ أ يع أ أأت ع‬
‫ب ن ‪.‬‬

‫و لعمل هذا أقوم باآلتي‪:‬‬

‫‪ -1‬ف حع مل ص حع‪.Google Chrome‬‬

‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬
‫‪ -2‬دخ ع ن ن‪:‬‬
‫‪localhost:8080/library/php/DeleteForm.html‬‬

‫‪ -3‬دخ أ عك دع ك أ ‪:‬ع‪ 1221‬عفيعلربععنصع‬

‫‪.Enter Book ID‬‬

‫ع زرع‪.Delete Book‬‬ ‫ع‬ ‫‪ -1‬ض‬

‫ع‬

‫‪4‬‬

‫‪1‬‬ ‫‪146‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التأكد من عملية تنفيذ حذف سجل‬

‫‪5‬‬
‫‪ -5‬الحظعظه رع رس ع‪:‬‬
‫”‪“Record Deleted = 1‬ع عإذ عك نع س أ ع‬
‫ل ج د عفيع ل تولعوعتمعحسفه ع و ع‬

‫”‪“Record Deleted = 0‬ع عإذ عك نع س أ ع‬

‫غي عل ج دع صأ أألعفيع ل تولع ب ع س أ أ ل ع‬
‫ل سج‪ .‬ع‬
‫ع‬
‫ع‬
‫ع‬
‫ع‬
‫ع‬ ‫سأأنتن تع أنع نهعتمعحسجع س ع س أ عب‬
‫ليع ل أتولع‪books‬عن سأ أ أ أأه وع عذ ع ع‬
‫‪6‬‬ ‫‪7‬‬ ‫‪8‬‬ ‫‪9‬‬
‫ب أتي‪:‬‬

‫‪ -6‬ف حع مل ص حع‪Google Chrome.‬‬

‫‪ -7‬دخ ع ن ن‪:‬‬

‫‪localhost:8080/phpmyadmin/‬‬

‫‪ -8‬تن تعليعإدخ لع سمع ملس خت عوعك ع‬

‫ملرور‪.‬‬
‫ع زرع‪.Go‬‬ ‫ع‬ ‫‪ -9‬ض‬

‫‪2‬‬ ‫‪147‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التأكد من عملية تنفيذ حذف سجل‬

‫‪11‬‬

‫‪ -11‬ض عليع إلط رع أليسرع ع لل ع(‪)+‬‬

‫ب نبع ت ع ب ن ع‪.Library‬‬
‫ع‬
‫ع‬
‫ع‬
‫ع‬

‫‪11‬‬ ‫‪12‬‬ ‫‪13‬‬ ‫ع ل تولع‪.books‬‬ ‫ع‬ ‫‪ -11‬ض‬

‫ع ب يبع‪.browse‬‬ ‫ع‬ ‫‪ -12‬ض‬

‫‪ -12‬وع الحظعفيع ل ع ل تول ع نهعالعوج دع‬

‫س ع ك عر مع‪.4331‬‬

‫‪3‬‬ ‫‪148‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫إنشاء منوذج لصفحة حتديث سجل‬ ‫األول‬
‫الثانوي‬

‫‪ -1‬سأقوم بإنشاء النموذج الخاص بتحديث‬

‫‪1‬‬ ‫بيانات سجل موجود في جدول الكتب‬
‫‪ books‬على أن يظهر بالشكل املوضح في‬
‫الصورة‪ ،‬و يحتوي العناصر اآلتية ‪:‬‬
‫أ‪ -‬مربع نص إدخال كود الكتاب مسبوقا‬
‫بالعنوان ‪.Enter Book ID‬‬
‫ب‪ -‬مربع نص إدخال اسم الكتاب مسبوقا‬
‫بالعنوان ‪.Enter Book Title‬‬
‫ت‪ -‬مربع نص إدخال تاريخ إصدار الكتاب‬
‫مسبوقا بالعنوان ‪.Date of edition‬‬
‫ث‪ -‬مربع نص إدخال عدد نسخ الكتاب‬
‫مسبوقا بالعنوان ‪Number of‬‬
‫‪.copies‬‬
‫ج‪ -‬زر إرسال البيانات بعنوان ‪Update‬‬
‫‪2‬‬ ‫‪3‬‬ ‫‪.Book‬‬
‫ا‬
‫وإلنجاز ذلك سأخطط أول لختيار اسم مللف‬
‫الـ ‪ php‬الذي سيحتوي التعليمات البرمجية‬
‫الخاصة بتحديث سجل‪ ،‬وهو كاآلتي‬
‫"‪ "MyUpdateQuery.php‬و طريقة إرسال‬
‫البيانات و هي الطريقة ‪.get‬‬
‫‪ -2‬من خالل برنامج ‪ ، Flash develop‬أفتح‬
‫امللف "‪."MyUpdateForm.html‬‬
‫‪ -3‬بعد العالمة >‪، <body‬‬

‫‪1‬‬ ‫‪149‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة حتديث سجل‬

‫‪4‬‬ ‫‪ُ -4‬‬

‫أدرج عالم ـ ـ ــة ب ـ ـ ــدء النم ـ ـ ــوذج و خاص ـ ـ ــيا ا‪،‬‬
‫والتي ستكون كاآلتي ‪:‬‬

‫‪<form‬‬
‫"‪action="MyUpdateQuery.php‬‬
‫>"‪method="get‬‬
‫‪ -5‬أدرج العالمة >‪<p‬‬
‫‪ -6‬وأدخل النص ‪Enter Book ID :‬‬
‫‪ -7‬أدرج مربـ ـ ــع نـ ـ ــص الخ ـ ــاص بكـ ـ ــود الكتـ ـ ــاب‪،‬‬
‫وذلك بإدراج العالمة ‪ <input‬متبوعة بـ ‪:‬‬

‫أ‪ -‬خاصية "‪ ، type="number‬للدللة‬

‫‪6‬‬ ‫‪7‬‬ ‫‪8‬‬
‫عل ـ ـ ــى أن البيان ـ ـ ــات ف ـ ـ ــي مرب ـ ـ ــع ال ـ ـ ــنص‬
‫ستكون رقمية‪.‬‬

‫‪5‬‬ ‫ب‪ -‬خاصية "‪ name="ID_BOOK‬وذلـك‬

‫إلسناد اسم ملربع النص‪.‬‬
‫‪ -8‬أغل ــم عالم ــة ‪ input‬فتك ــون تر يب ــة عالم ــة‬
‫‪ input‬الن ائية كاآلتي ‪:‬‬
‫>‪<input type="number" name="ID_BOOK"/‬‬

‫‪2‬‬ ‫‪150‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة حتديث سجل‬

‫‪9‬‬ ‫‪11‬‬ ‫‪ -9‬س ــأدرج اآلن عن ــوان و مرب ــع ال ــنص الخ ــاص‬
‫بإدخال عنوان الكتاب‪ ،‬على النحو اآلتي‪:‬‬
‫أ‪ -‬أدرج أول العالمة >‪.<p‬‬
‫ب‪ -‬أدرج النص ‪Enter Book Title:‬‬
‫‪ -11‬أدرج مربـ ــع نـ ــص عنـ ــوان الكتـ ــاب‪ ،‬وذلـ ــك‬
‫بإدراج العالمة ‪ <input‬متبوعة بـ ‪:‬‬
‫أ‪ -‬خاص ـ ـ ـ ـ ــية "‪ ، type="text‬بم ـ ـ ـ ـ ــا أن‬
‫مربع النص سيحتوي نصا‬
‫ب‪ -‬وخاص ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــية‬
‫"‪name="TITLE_BOOK‬‬
‫‪ -11‬أغل ـ ـ ــم عالمـ ـ ـ ــة ‪ ، input‬وتكـ ـ ـ ــون تر يبـ ـ ـ ــة‬
‫العالمة ‪ input‬الن ائية كاآلتي ‪:‬‬
‫‪11‬‬ ‫>‪<input type="text" name=" TITLE_BOOK"/‬‬
‫‪ -12‬ســأدرج اآلن عنــوان ومربــع الــنص الخــاص‬
‫‪12‬‬ ‫‪13‬‬ ‫بإدخال تاريخ إصدار الكتاب‪:‬‬
‫أ‪ -‬أدرج العالمة >‪ ، <p‬ثم‬
‫ب‪ -‬أدخل النص ‪Date of Edition :‬‬
‫‪ -13‬أدرج مربـ ــع نـ ــص ت ـ ــاريخ إصـ ــدار الكت ـ ــاب‪،‬‬
‫وذلك بإدراج العالمة ‪ <input‬متبوعة بـ ‪:‬‬
‫أ‪ -‬خاص ــية "‪ ، type="date‬بم ــا أن مرب ــع‬
‫النص سيحتوي تاريخا‪.‬‬
‫ب‪ -‬و خاصية "‪name="DOE_BOOK‬‬
‫‪ -14‬أغلم عالمة ‪ input‬وتكون تر يبة العالمة‬
‫‪ input‬الن ائية كاآلتي ‪:‬‬
‫>‪<input type="date" name="DOE_BOOK"/‬‬

‫‪14‬‬

‫‪3‬‬ ‫‪151‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة حتديث سجل‬

‫‪ -15‬ســأدرج اآلن عنــوان ومربــع الــنص الخــاص‬

‫‪15‬‬ ‫‪16‬‬
‫بإدخال عدد نسخ الكتاب‪:‬‬
‫أ‪ -‬أدرج العالمة >‪.<p‬‬
‫ب‪ -‬أدخل النص ‪Number of Copies :‬‬
‫‪ -16‬أدرج مربع نـص عـدد نسـخ الكتـاب‪ ،‬وذلـك‬
‫بإدراج العالمة ‪ <input‬متبوعة بـ ‪:‬‬
‫>‪ --‬إدراج مربع نص عدد نسخ الكتاب ‪<!--‬‬
‫أ‪ -‬خاص ـ ــية "‪ ، type="number‬بم ـ ــا أن‬
‫مربع النص سيحتوي عددا‬
‫ب‪ -‬وخاص ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ـ ــية‬
‫"‪name="COPIES_BOOK‬‬
‫‪ -17‬أغلم عالمة ‪ input‬وتكون تر يبة العالمة‬
‫‪18‬‬ ‫‪ input‬الن ائية كاآلتي ‪:‬‬
‫‪17‬‬
‫>‪<input type="number" name="COPIES_BOOK"/‬‬
‫‪ -18‬أدرج سطرا فارغا >‪.<br/‬‬
‫‪21‬‬ ‫‪19‬‬ ‫ُ‬
‫‪ -19‬ث ــم أدرج أخ ـرا زر إرس ــال البيان ــات‪ ،‬و ه ــو‬
‫مـ ــن نـ ــو ‪، submit‬و أختـ ــار ل ـ ـ العنـ ــوان‬
‫"‪ ، "Add a Book‬فتكـون جملـة ‪input‬‬
‫كاآلتي ‪:‬‬
‫>‪<input type="submit" value="Update Book "/‬‬
‫‪ -21‬اآلن و قد انت يت من إدراج كافة العناصر‬
‫املطلوبــة‪ ،‬أتأ ــد م ــن وج ــود عالمــة إغ ــال‬
‫النموذج >‪</form‬‬
‫‪ -21‬أحفظ امللف‪.‬‬

‫‪21‬‬

‫‪4‬‬ ‫‪152‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة حتديث سجل‬

‫‪22‬‬ ‫‪23‬‬ ‫‪24‬‬ ‫‪ -22‬أنتقل إلى املتصفح ‪. Google chrome‬‬

‫‪ -23‬أدخل عنوان الصفحة كاآلتي‪:‬‬

‫‪localhost:8080/library/php/MyUpdateForm.html‬‬

‫‪ -24‬ألحـ ــظ مختلـ ــف مكونـ ــات النمـ ــوذج التـ ــي‬
‫أدرجت ا‪.‬‬

‫‪5‬‬ ‫‪153‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫تعليمات ‪ php‬لتحديث سجل‬ ‫األول‬
‫الثانوي‬
‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬
‫ألدرج التعليمات البرمجية لتحديث سجل‪:‬‬

‫‪ -1‬مننخ لن برنننام ‪ ، Flash Develop‬أفننت‬

‫امللف ‪.MyUpdateQuery.php‬‬

‫‪ -2‬بعد ع مة بدء تعليمات ‪. <?php‬‬

‫‪ -3‬أدلنل مملننة اعنتدعاء ملننف النردة ب اعنند‬

‫البيان ن ننات امل ن ن ن "‪ ، "connect.php‬ع ن ننخ‬
‫طريق الدالة )(‪ include‬كاآلتي ‪:‬‬

‫;)'‪include('connect.php‬‬

‫‪4‬‬
‫‪ -4‬عأنشن ا اآلا اتعننتع ذ الننكن عننيم مننخ‬
‫تح ننديث س ننجل‪ ،‬حي ننث إن ن ن عن ن مر الخ ننادذ‬
‫بعمل اآلتي‪:‬‬
‫‪Update table_name change values of‬‬
‫)‪(field1=value1,…., field n=value n‬‬
‫‪where field_id is equal to value_id‬‬

‫‪1‬‬ ‫‪154‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬لتحديث سجل‬

‫عأترمم هكه الجملة إلى مملة ‪ sql‬فتصب‬

‫‪Update books set‬‬

‫‪title_book='$_REQUEST[TITLE_BOOK]',‬‬

‫‪doe_book='$_REQUEST[DOE_BOOK]',‬‬

‫]‪copies_book='$_REQUEST[COPIES_BOOK‬‬

‫;']‪' where id_book='$_REQUEST[ID_BOOK‬‬

‫‪ -5‬عأضع الجملة اآلا بيا ع مت ت صيص‪،‬‬

‫‪ -6‬وأحفظه ننا ن ن متغي ننر باع ننم ‪ $sql‬ل قتص ننار‬

‫علننى اعننتدعاوض عنندة إعنناد جتابننة الجملننة‬
‫كاملة كلما دعت الحامة لكلك‪،‬‬

‫‪6‬‬ ‫‪5‬‬

‫‪2‬‬ ‫‪155‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬لتحديث سجل‬
‫‪7‬‬
‫‪ -7‬فتصب الجملة النهاوية كاآلتي ‪:‬‬
‫"=‪$sql‬‬ ‫‪Update‬‬ ‫‪books‬‬ ‫‪set‬‬
‫‪title_book='$_REQUEST[TITLE_BOOK]',‬‬
‫‪doe_book='$_REQUEST[DOE_BOOK]',‬‬
‫']‪copies_book='$_REQUEST[COPIES_BOOK‬‬
‫;"']‪where id_book='$_REQUEST[ID_BOOK‬‬

‫‪ -8‬ع ن ن ننأقدذ اآلا بع في ن ن ننك اتع ن ن ننتع ذ‪ ،‬ف ن ن ننأدرج‬

‫الدالة‪:‬‬
‫‪mysqli_query($con,$sql) or die ("error‬‬
‫;)"!‪query‬‬
‫أتح ن ن نند أا ه ن ن ننكه الدال ن ن ننة ت ن ن ننأتي م ن ن ننحددة‬
‫بمتغيريخ‪:‬‬
‫‪ ‬املتغي ن ننر األو (‪ )$con‬يمث ن ننل قاع ن نند‬
‫البيانات امل تخدمة حاليا‪،‬‬
‫‪ ‬واملتغين ننر الثن نناني (‪ )$sql‬يمثن ننل مملن ننة‬
‫ال ن ن ن ‪ SQL‬التن ن ن عن ن نيتم ت في ن ننكها عل ن ننى‬
‫قاعد البيانات‪.‬‬
‫بي مننا يم ن الجنناء الثنناني مننخ هننكه الجملننة‬
‫)”!‪ or die (“error query‬مننخ إرهننار‬
‫‪8‬‬ ‫الرعالة "‪ "error query‬ن حنا ف نل ت فينك‬
‫اتعتع ذ‪.‬‬

‫‪3‬‬ ‫‪156‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬لتحديث سجل‬

‫‪ -9‬وألتأجد اآلا مخ نجاح عملية إدراج السجل‬

‫أو ف ن ن ننلها ع ن ن ننأقدذ ب ره ن ن ننار رع ن ن ننالة تب ن ن ننيا‬
‫ذلك‪،‬عخ طريق الجملة اآلتية ‪:‬‬
‫‪echo"Record Updated‬‬
‫;(‪=".mysqli_affected_rows($con‬‬
‫أتحد أا نص الرعالة يتكدا مخ ماأيخ‪،‬‬
‫ماء ثابت و هد املدمدد بيا ع مت‬
‫الت صيص "= ‪ ،"Record Updated‬ثم ماء‬
‫الدالة‬ ‫م بدق ب طة‪ ،‬واملتمثل‬
‫‪9‬‬ ‫)‪mysqli_affected_rows($con‬‬
‫‪12‬‬
‫ووريفتها ح اب عدد السج ت املتأثر‬
‫باتعتع ذ‪ ،‬فتكدا الرعالة كاآلتي ‪:‬‬
‫‪Record‬‬ ‫‪updated‬‬ ‫=‬
‫‪number_of_affected_rows ،‬‬

‫‪ -11‬و ألين نرا أق نندذ بن ن ق ق اترتب ننا ب اع نند‬

‫البيانات كاآلتي ‪:‬‬
‫;)‪mysqli_close($con‬‬
‫‪ -11‬أتأج نند م ننخ وم نندد ع م ننة قل ننق تعليم ننات‬
‫‪ php‬كاآلتي‪?> :‬‬
‫‪11‬‬ ‫‪11‬‬ ‫‪ -12‬أحفد امللف‪.‬‬

‫‪4‬‬ ‫‪157‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫التأكد من عملية تنفيذ حتديث سجل‬ ‫األول‬
‫الثانوي‬

‫التأكد من عملية تنفيذ تحديث سجل‪:‬‬

‫ألتأكد من صحة التعليمات البرمجية‬

‫لتحديث سجل‪ ،‬سأقوم بإدخال بيانات‬
‫السجل املراد تحديثه في نموذج تحديث‬
‫سجل‪ ،‬وأتأكد من ظهور الرسالة ‪“Record :‬‬
‫”‪ Updated = 1‬إثر الضغط على الزر‬
‫‪ ، Update Now‬وأتأكد بعد ذلك من تغير‬
‫بيانات السجل في جدول ‪ books‬ضمن‬
‫قاعدة البيانات‪.‬‬

‫و لعمل هذا أقوم باآلتي‪:‬‬

‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬
‫‪ -1‬أفتح املتصفح ‪.Google Chrome‬‬

‫‪ -2‬أدخ ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل للل الع ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل للوا ‪:‬‬

‫‪localhost:8080/library/php/UpdateForm.html‬‬

‫‪ -3‬أدخل البيانات اآلتية ضمن ال موذج‪:‬‬

‫‪ID_BOOK :9999‬‬
‫‪TITLE_BOOK : Dynamic Web Pages‬‬
‫‪DOE_BOOK : 03/05/2015‬‬
‫‪COPIES_BOOK : 10‬‬

‫‪ -4‬أضغط اآل على الزر ‪.Update Book‬‬

‫‪4‬‬

‫‪1‬‬ ‫‪158‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التأكد من عملية تنفيذ حتديث سجل‬

‫‪5‬‬
‫‪ -5‬أالحظ ظهور الرسالة ‪:‬‬
‫”‪ “Record Updated = 1‬حيللث تبللي أنلله‬
‫تم تحديث سجل واحد في قاعدة البيانات‪.‬‬

‫سأتأكد اآل أنه تم تحديث هذا السجل‬

‫بالفعل في الجدول ‪ ،books‬ولعمل ذلك‬
‫‪6‬‬ ‫‪7‬‬ ‫‪8‬‬ ‫‪9‬‬
‫أقوم باآلتي‪:‬‬

‫‪ -6‬أفتح املتصفح ‪. Google Chrome‬‬

‫‪ -7‬أدخ ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل للل الع ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل ل للوا‬

‫‪localhost:8080/phpmyadmin/‬‬

‫‪ -8‬أتأكلد ملن إدخلال اسلم املخلت دم وةلمللة‬

‫املرور‪.‬‬
‫‪ -9‬أضغط على الزر ‪.Go‬‬

‫‪2‬‬ ‫‪159‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التأكد من عملية تنفيذ حتديث سجل‬

‫‪11‬‬

‫‪ -11‬أضغط من اإلطار األيخر على عالمة‬

‫(‪ )+‬بجانب قاعدة البيانات ‪.Library‬‬

‫‪11‬‬ ‫‪12‬‬ ‫‪13‬‬

‫‪ -11‬أضغط على الجدول ‪.books‬‬

‫‪ -12‬أضغط على التبويب ‪.browse‬‬

‫‪ -13‬أالحظ في سجالت الجدول تغير بيانات‬

‫السجل الذي تم تحديثه‪.‬‬

‫‪3‬‬ ‫‪160‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫إنشاء منوذج لصفحة االستعالم عن سجل‬ ‫األول‬
‫الثانوي‬

‫خ‬ ‫أ أ أ أ أ أأا خ أ أ أ أ أ أ‬ ‫‪ -1‬س أ أ أ أ أ أأج الخاص أ أ أ أ أ أ خ‬

‫‪1‬‬ ‫خ عأ أ خ‬ ‫ا السأ أأعن لخلأ أأوخ أ أ خ أ أ خ أ أ‬
‫أأض خ يا أ خ أ خ‬ ‫‪،books‬خللأأأخ يخهر أألخا‬
‫صارة‪،‬خ خهحعايخ ن صلخ آلتية‪:‬‬
‫أ‪ .‬خملبأ خصأأدخال أ خلأ لخ خأألخ عأ خ‬
‫مسأأاا خا أ ن ا يخ ‪"Number of‬‬
‫"‪Copies :‬‬
‫‪ .‬زرخارس أ أ أ أ أ أ أ أ خ اي ص أ أ أ أ أ أ أ أ خ ن أ أ أ أ أ أ أ أأا ي‬
‫خ)‪.Select Record(s‬‬

‫ا‬
‫ألصجزخ ك‪،‬خسأج ط خ خالخال عيأ رخ سأملخي أ خ‬
‫أ أأخ‪php‬خ أأييخس أأيحعايخ عن ي أ أ خ مجي أأةخ‬
‫ص أأة‪،‬خا اح أأسخل أأوخ أ أ خ أ أأاخ أ أ آل ‪:‬خ‬
‫‪2‬‬ ‫‪3‬‬ ‫‪4‬‬ ‫"‪."MySelectQuery.php‬خ طليقأ أ أ أأةخارس أ أ أ أ خ‬
‫اي ص خ خه خ طليقةخ‪ .get‬خ‬
‫‪ -2‬مأأوخ أ خالصأ م خ‪،Flash Develop‬خ فأأع خ‬
‫ي خ"‪."MySelectForm.html‬‬
‫‪ -3‬ن خ ن مةخ>‪<body‬‬
‫‪ -4‬خ ا أ أ خا أ أأصلر خل م أ أأةخا أ أ خ أ أأا ‪،‬خ ت أ أ خ‬
‫سعضايخ آل ‪:‬‬
‫>"‪<form action="MySelectQuery.php" method="get‬‬

‫‪1‬‬ ‫‪161‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة االستعالم عن سجل‬

‫لر خ آليخل أ أ أأا يخ خملب أ أ أ خص أ أ أأدخل أ أ أ لخ خ أ أ أألخ‬

‫ع ‪:‬‬
‫‪ -5‬ل خ ن مةخ>‪<p‬‬
‫‪ -6‬ل خ دخ‪Number Of Copies :‬‬
‫‪ -7‬لر خ آليخملب خصأدختأ ريإخاصأ رخ عأ ‪،‬‬
‫ع رخ ن مةخ‪<input‬خمعاالةخاأ خهج ‪:‬‬
‫‪ -‬خ صيةخ"‪type="number‬خخخ‬
‫‪ -‬صيةخ"‪name="COPIES_BOOK‬‬
‫‪ -8‬غ أأالخل م أأةخ‪input‬خ تض أأايختلةيا أأةخل م أأةخ‬
‫‪input‬خخ نه ئيةخ آل خ‪:‬‬
‫"‪<input type="number‬‬
‫‪6‬‬ ‫‪7‬‬ ‫‪8‬‬
‫>‪name="COPIES_BOOK"/‬‬
‫‪ -9‬ثأأملخ ن أ خ ن مأأةخ>‪</p‬خ‪ ،‬لر خ ن مأأة >‪<br‬‬
‫‪5‬‬ ‫إللر خسطلخ ه ‪.‬‬
‫‪9‬‬ ‫‪ -11‬س أ أ أأجلر خزرخارس أ أ أ خ اي ص أ أ أ ‪،‬خخ أ أ أأي كخ‬
‫ل خ ن مةخ‪<input‬خمعاالةخاأ خهج ‪:‬‬
‫صيةخخ"‪type="submit‬‬ ‫‪-‬‬
‫‪value="Select‬‬ ‫ص أ أ أ أ أأيةخ‬ ‫ل‪-‬‬
‫")‪Record(s‬‬
‫‪ -11‬غ أ أ أأالخل م أ أ أأةخ‪input‬خ تض أ أ أأايختلةيا هأ أ أ أ خ‬
‫نه ئيةخ آل خ‪:‬‬
‫‪<input type="submit" value="Select‬‬
‫خ>‪Record(s)"/‬‬
‫‪ -11‬آليخ أ أ أ أ أ خ ص هي أ أ أ أ أ خم أ أ أ أ أأوخالر خ ف أ أ أ أ أأةخ‬
‫ن صلخ يط ابة‪،‬خ تجة خموخ أالخل مأةخ‬
‫‪12‬‬ ‫‪11‬‬ ‫‪11‬‬
‫اغ قخ ا >‪</form‬‬

‫‪2‬‬ ‫‪162‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫إنشاء منوذج لصفحة االستعالم عن سجل‬

‫‪13‬‬
‫‪ -13‬حفظخ ي ‪.‬‬

‫‪14‬‬ ‫‪15‬‬ ‫‪16‬‬

‫‪ -14‬صعق خالأخ يعصف خ‪Google chrome‬‬

‫خل ا يخ صفحةخ آل ‪:‬‬ ‫‪ -15‬ل‬

‫‪Localhost:8080/library/php/SelectForm.html‬‬

‫أأا خ تأ أ خ‬ ‫‪ -16‬الح أأظخم ع أ خمضاص أ خ‬

‫لر ه ‪.‬‬

‫‪3‬‬ ‫‪163‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫تعليمات ‪ php‬الستعراض سجالت حمدّدة‬ ‫األول‬
‫الثانوي‬

‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬

‫ااا‬ ‫يا ا ا لع ا ااو‬
‫ألدرج التعليم ا ااجي ال‬
‫حددة‪:‬‬ ‫الي ّ‬
‫‪ -1‬ااخ لااال بونااج ‪ ،Flash Develop‬فاات‬
‫امللف ‪MySelectQuery.php‬‬
‫‪ -2‬بعد عال بدء تعليمجي ‪. <?php‬‬
‫‪ -3‬دلا مملا اعاتدعجء لااف الاودة ب جعاادة‬
‫البيجن ا ااجي امل ا ا ا ّ "‪ ، "connect.php‬ع ا ااخ‬
‫طويق الدال )(‪ include‬كجآلتي ‪:‬‬
‫;)'‪include('connect.php‬‬

‫ااخ‬ ‫‪ -4‬عأنشا ا اآلا اتعااتعالذ الااكن عاايم‬

‫ا الي ال تا ‪ ،‬ال ا عاادد‬ ‫ا‬ ‫عااو‬
‫نس ا ا ااالج ةا ا ا ا ا ا ا ااخ ال يما ا ا ا املدللا ا ا ا ا ا ا ا‬
‫‪4‬‬
‫ال م ا ج‪ ،‬حي ا إن ا ع ا و الا ااجدذ بعم ا‬
‫اآلتي‪:‬‬
‫‪Select all records from table_name‬‬
‫‪where‬‬
‫']‪copies-book <'$_REQUEST[COPIES_BOOK‬‬

‫‪1‬‬ ‫‪164‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬الستعراض سجالت حمدّدة‬

‫عأتومم هكه ال مل إلى ممل ‪ sql‬فتصب‬

‫‪select * from books‬‬

‫‪where‬‬
‫']‪copies_book<'$_REQUEST[COPIES_BOOK‬‬

‫ت صيص‪،‬‬ ‫‪ -5‬عأضع ال مل اآلا بيا عال‬

‫‪ -6‬حفظل ااج ا ا تغيا ا بجع اام ‪ $sql‬لالةتص ااجر‬

‫علااى اعااتدعجوض عا إعااجدة جتجبا ال ملا‬
‫كج ل كلمج دعت الحجم لكلك‪،‬‬

‫‪6‬‬ ‫‪5‬‬

‫‪2‬‬ ‫‪165‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬الستعراض سجالت حمدّدة‬

‫‪7‬‬
‫‪ -7‬فتصب ال مل النهجوي كجآلتي ‪:‬‬
‫‪$sql="select‬‬ ‫*‬ ‫‪from‬‬ ‫‪books‬‬
‫‪where‬‬
‫;"']‪copies_book<'$_REQUEST[COPIES_BOOK‬‬

‫ا‬ ‫‪ -8‬ة ذ بت فيك اتعتعالذ‪ ،‬حفظ ال تي‬

‫املتغي ‪ $result‬كجآلتي ‪:‬‬
‫)‪$result = mysqli_query($con , $sql‬‬
‫;)"!‪or die ("Error Query‬‬

‫اااا ا‬ ‫حيا ا ا ا ا املتغي ا ا ا ا ‪ $result‬عا ا ا ا‬

‫السا الي ال ا تاام تحد اادهج ع ااد‬ ‫السا‬
‫ت فيك اتعتعالذ‪.‬‬
‫بي مااج م ا ال ا ء النااجني ااخ هااكه ال مل ا‬
‫)”!‪ or die (“Error Query‬ااخ إرلااجر‬
‫الوع ااجل "!‪ "error query‬ا ا ح ااج ف ا ا‬
‫‪8‬‬ ‫ت فيك اتعتعالذ‪.‬‬

‫‪3‬‬ ‫‪166‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬الستعراض سجالت حمدّدة‬

‫ااخ املتغي ا‬ ‫األ‬ ‫عااأة ذ اآلا بحفااظ الس ا‬

‫‪ $result‬عخ طويق الدال ‪:‬‬

‫)‪mysqli_fetch_array($result‬‬

‫‪ -9‬حفظض املتغي ‪ $row‬على ال ح اآلتي‪:‬‬

‫;)‪$row = mysqli_fetch_array($result‬‬

‫‪9‬‬

‫‪11‬‬

‫‪ -11‬من ا املتغي ا ‪ $row‬ه ااج ص ااف ف اي‬

‫بع ا ااد اح ا ااد تم نا ا ا ا ا ااخ ر عا ا ا عما ا اادة‬
‫لت يخ ةيم ح الس كجآلتي ‪:‬‬

‫‪4‬‬ ‫‪167‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬الستعراض سجالت حمدّدة‬

‫‪11‬‬
‫علاى ال جةا ‪ ،‬درج‬ ‫‪ -11‬لعو هكه الح‬
‫التعليمجي اآلتي ‪:‬‬

‫;"‪echo $row[0]."/‬‬

‫;"‪echo $row[1]."/‬‬

‫;"‪echo $row[2]."/‬‬

‫;"‪echo $row[3]."/‬‬

‫;">‪echo "<br‬‬

‫;"‪echo $row['id_book']."/‬‬

‫;"‪echo $row['title_book']."/‬‬

‫‪12‬‬ ‫;"‪echo $row['doe_book']."/‬‬

‫;"‪echo $row['copies_book']."/‬‬

‫;">‪echo "<br‬‬

‫‪ -12‬ا ااخ ال ا ا ااة ا ال ملا ا األليا ا ة تم ا ا‬

‫احد ف ة كجآلتي‪.‬‬ ‫خ عو‬

‫‪5‬‬ ‫‪168‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تعليمات ‪ php‬الستعراض سجالت حمدّدة‬

‫ألتم خ خ عو كجف الس الي املحددة‬

‫ت وار ج أتي‪:‬‬ ‫اتعتعالذ‬
‫‪ .‬ممل حفظ الس خ املتغي‬
‫‪13‬‬ ‫‪ $result‬إلى املتغي ‪$row‬‬
‫ب‪ .‬ممل عو الس على ال جة ‪.‬‬

‫‪ -13‬لعما ا ا ه ا ااكا ع ت ا ااع ه ا ااجتيا ال ملت ا اايا‬

‫دالا ا ا ا مملا ا ا ا الت ا ا ا اوار ‪ while‬فيص ا ا ااب‬
‫ع ا ااو ممي ا ااع ا ا ا الي اتع ا ااتعالذ عل ا ااى‬
‫ال جة كجآلتي‪:‬‬
‫))‪While ($row=mysqli_fetch_array($result‬‬
‫{‬ ‫;"‪echo $row['id_book']."/‬‬
‫;"‪echo $row['title_book']."/‬‬
‫;"‪echo $row['doe_book']."/‬‬
‫‪14‬‬ ‫;"‪echo $row['copies_book']."/‬‬
‫;">‪echo "<br/‬‬
‫}‬

‫‪ -14‬فتع ااو ممي ااع ا ا الي اتع ااتعالذ جم ااج‬

‫ة الص رة املوف ‪.‬‬ ‫ه‬

‫‪6‬‬ ‫‪169‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫التأكد من عملية استعراض السجالت‬ ‫األول‬
‫الثانوي‬

‫ألتأكد من صحة التعليمات البرمجية‬

‫‪1‬‬ ‫‪2‬‬ ‫‪3‬‬ ‫واستعراض السجالت‪ ،‬سأقوم بإدخال‬
‫معيار البحث في نموذج استعراض أو‬
‫تحديد السجالت‪ ،‬و أضغط على الزر‬
‫)‪ ، Select Record(s‬وأتأكد من ظهور‬
‫السجالت التي ينطبق عليها معيار البحث‬
‫من دون ظهور أي أخطاء برمجية ‪ ،‬و لعمل‬
‫هذا أقوم بما يأتي‪:‬‬

‫‪ -1‬أفتح املتصفح ‪.Google Chrome‬‬

‫‪ -2‬أدخل العنوان‪:‬‬
‫‪localhost:8080/library/php/SelectForm.html‬‬
‫‪4‬‬
‫‪5‬‬ ‫‪ -3‬أدخل البيانات اآلتية ضمن النموذج‪:‬‬

‫‪ ،number of copies :3‬ثم‬

‫‪ -4‬أضغط على الزر ‪Select Record(s).‬‬

‫‪ -5‬ستتترهر تتي ميتتال الستتجالت لل تت التتتي‬

‫عدد نسخها أقل من ‪.3‬‬

‫‪1‬‬ ‫‪170‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق نتيجة استعالم حتديد السجالت‬ ‫األول‬
‫‪ Select‬يف جدول‬ ‫الثانوي‬

‫‪1‬‬ ‫يي ل يي‬ ‫لتنس ي ييجة اسجع ي ييي ا ي ييت‬

‫‪ Select‬في ج ول‪:‬‬

‫‪ -1‬يظهر التنسيق الحالي لنتيجة استعالم‬

‫تحديد السجالت بطريقة بسيطة تفتقر‬
‫إلى حسن العرض و التنسيق‪.‬‬

‫‪2‬‬

‫‪ -2‬ومن أفضل الحلول لعرض السجالت‬

‫بطريقة متناسقة وحسنة هو استخدام‬
‫الجدول‪ ،‬فتظهر السجالت بطريقة‬
‫واضحة وجذابة‪.‬‬

‫‪1‬‬ ‫‪171‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق نتيجة استعالم حتديد السجالت‬
‫‪ Select‬يف جدول‬

‫‪3‬‬ ‫‪4‬‬
‫في ج ول‬ ‫أالحظ أاه عن عرض ل‬

‫‪ -3‬يبقى رأس الجدول ثابتا‪ ،‬حيث يحتوي‬

‫عناوين الحقول‪.‬‬

‫‪ -4‬بينما يتم إدراج صف جديد للجدول‬

‫لكل سجل جديد من سجالت نتيجة‬
‫االستعالم‪ ،‬وفي كل صف يتم إنشاء‬
‫خلية لكل حقل من حقول السجل‪.‬‬

‫‪5‬‬ ‫‪6‬‬

‫‪ -5‬لذلك سيكون بدء إدراج الجدول ورأس‬

‫الجدول خارج الجملة التكرارية‪.‬‬

‫‪ -6‬ويتم إدراج الصفوف والخاليا داخل‬

‫الجملة التكرارية تزامنا مع عرض كل‬
‫السجل جديد داخل الجملة التكرارية‪.‬‬

‫‪2‬‬ ‫‪172‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق نتيجة استعالم حتديد السجالت‬
‫‪ Select‬يف جدول‬

‫‪7‬‬ ‫‪8‬‬
‫‪Flash‬‬ ‫‪ -7‬وإلنجاااذ هااذا ماان خااالل برنااام‬
‫‪ ،Develop‬أفا ا ا ا ا ا ا ا ا ا ا ا ا ا ا ا ا ا اات ا لا ا ا ا ا ا ا ا ا ا ا ا ا ا ا ا ا ا ااف‬
‫‪.TablSelectQuery.php‬‬

‫‪ -8‬قبا اال الجملا ااة التكراريا ااة أن ا ا الجا اادول‬

‫ورأس الجدول‬
‫;">‪echo "<table‬‬
‫;”>‪echo “<tr‬‬
‫;”>‪echo “<th>ID BOOK</th‬‬
‫;”>‪echo “<th>TITLE BOOK</th‬‬
‫;”>‪echo “<th>DATE OF EDITION</th‬‬
‫;”>‪echo “<th>NUMBER OF COPIES</th‬‬
‫‪9‬‬
‫;" >‪echo “</tr‬‬

‫‪ -9‬داخل الجملة التكرارية‬

‫))‪While ($row=mysqli_fetch_array($result‬‬
‫{‬

‫‪3‬‬ ‫‪173‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق نتيجة استعالم حتديد السجالت‬
‫‪ Select‬يف جدول‬

‫‪11‬‬ ‫‪ -11‬أدرج الصفوف تزامنا مع كل سجل جديد‬

‫;">‪echo "<tr‬‬

‫;">‪echo "<td>".$row['id_book']."</td‬‬

‫;">‪echo "<td>".$row['title_book']."</td‬‬

‫;">‪echo "<td>".$row['doe_book']."</td‬‬

‫;">‪echo "<td>".$row['copies_book']."</td‬‬

‫>‪echo "</tr‬‬

‫‪11‬‬ ‫‪ -11‬أغل ااق الج اادول ف ااور الخ ااروج م اان الجمل ااة‬
‫التكرارية‬
‫; ">‪Echo "</table‬‬

‫‪4‬‬ ‫‪174‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫تنسيق نتيجة استعالم حتديد السجالت‬
‫‪ Select‬يف جدول‬
‫‪12‬‬
‫‪ّ -12‬‬
‫أطب ا ااق تنس ا اايقا مخصص ا ااا‪ ،‬ت ا ا ّام إع ا ااداد‬
‫مس ا اابقا‪ ،‬علا ااى الجا اادول فا ااي ملا ااف خا ااار ي‬
‫باسم "‪ "table.css‬و أستدعيه من خالل‬
‫ملف الا ‪ PHP‬كاآلتي ‪:‬‬

‫"\‪echo "<link href=\"table.css‬‬

‫;">‪rel=\"stylesheet\" type=\"text/css\"/‬‬

‫أفت ا لف‬ ‫‪-31‬‬

‫‪15‬‬ ‫‪13‬‬ ‫‪14‬‬
‫‪localhost:8080/library/php/TableSelectForm.‬‬
‫‪html‬‬

‫‪ -14‬أدخل عدد النسخ في مربع النص‪.‬‬

‫‪ -15‬أضغط الزر )‪.Select Record(s‬‬

‫‪16‬‬

‫‪ -16‬أالحا ا ا ا ا ا التنس ا ا ا ا اايق الجدي ا ا ا ا ااد لنتيج ا ا ا ا ااة‬

‫االستعالم‪.‬‬

‫‪5‬‬ ‫‪175‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬ ‫األول‬
‫الثانوي‬

‫الفهرس‬
‫رقم الصفحة‬ ‫وصف الخطأ‬
‫ً‬
‫‪3‬‬ ‫أوال‪ :‬األخطاء الشائعة في البرمجة بلغة ‪Html‬‬
‫‪3‬‬ ‫‪ ‬ظهور العنوان على املتصفح بشكل غير صحيح‬

‫‪4‬‬ ‫‪ ‬ظهور الفقرة على املتصفح بشكل غير صحيح‬

‫‪5‬‬ ‫‪ ‬عدم ظهور الصورة على املتصفح‬

‫‪6‬‬ ‫‪ ‬االرتباط التشعبي غير ّ‬

‫مفعل‬

‫‪7‬‬ ‫‪ ‬أخطاء الجداول‬

‫‪11 - 8‬‬ ‫‪ ‬أخطاء الـ ‪Forms‬‬

‫‪11‬‬ ‫ً‬
‫ثانيا‪ :‬األخطاء الشائعة في تنسيق صفحات الويب باستخدام ‪CSS‬‬

‫‪14 - 11‬‬ ‫‪ ‬أخطاء تنسيقات ‪Css‬‬

‫‪1‬‬ ‫‪176‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫تابع الفهرس‬

‫رقم الصفحة‬ ‫وصف الخطأ‬

‫ً‬
‫‪15‬‬ ‫ثالثا‪ :‬األخطاء الشائعة في البرمجة بلغة ‪PHP‬‬

‫‪51‬‬ ‫مثال لبرنامج ‪ ( PHP‬يحتوي البرنامج أخطاء مفتعلة)‬

‫‪51‬‬ ‫األخطاء املفتعلة في املثال ‪:‬‬

‫‪51‬‬ ‫‪ ‬ظهور جمل ‪ PHP‬عند استعراض ملف ويب‬

‫‪51‬‬ ‫‪ ‬ظهور رسالة ‪Unable to access the network‬‬

‫‪ ‬خطأ في استدعاء دالة‬
‫‪51‬‬
‫‪Call to undefined function function_name() ...........‬‬
‫‪ ‬خطأ في كتابة اسم امللف املستدعى‪.‬‬
‫‪02‬‬
‫‪Failed to open stream .............‬‬
‫‪ ‬خطأ في االتصال بقاعدة البيانات‬
‫‪05‬‬
‫‪Unknown database Database_name .............‬‬
‫‪ ‬أخطاء في بناء جملة ‪PHP‬‬
‫‪02 - 00‬‬
‫‪Syntax error‬‬
‫‪ ‬أخطاء خصائص الدوال‬
‫‪01 - 02‬‬
‫‪Funtion_name() expects ..............................‬‬

‫‪2‬‬ ‫‪177‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫ً‬
‫أوال‪ :‬األخطاء الشائعة في البرمجة بلغة ‪: Html‬‬
‫ظهور العنوان على املتصفح بشكل غيرصحيح‬
‫عند استعراض الصفحة ظهرالعنوان على املتصفح بالشكل التالي‪:‬‬

‫الخطأ‬

‫ً‬
‫بدال من ‪:‬‬

‫‪ -5‬خطأ إمالئي يتمثل في كتابة اسم العالمة بشكل خاطئ كالتالي‬

‫السبب ‪/‬‬
‫>‪<h>Welcome to My library</h‬‬
‫األسباب‬
‫‪ -0‬خطأ في كتابة اسم أو مكان ملف التنسيق املرتبط بالصفحة ‪start.html‬‬

‫‪ -5‬التأكد من كتابة العالمة بالشكل الصحيح التالي‬

‫<‪>h1> Welcome to My library </h1‬‬
‫‪ -0‬عند ربط الصفحة ‪ start.html‬بملف التنسيق يجب التأكد من كتابة اسم امللف‬ ‫التصحيح‬
‫وامتداده وكذلك مكان ملف التنسيق بشكل سليم‬

‫‪3‬‬ ‫‪178‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫ظهور الفقرة على املتصفح بشكل غيرصحيح‬

‫عدم ظهور الفقرة بالشكل التالي ‪:‬‬

‫الخطأ‬

‫بدال من ‪:‬‬

‫عدم وضع عالمة الفقرة >‪ <p‬في بداية النص‪:‬‬ ‫السبب ‪/‬‬
‫األسباب‬

‫يجب التأكد من وضع عالمة الفقرة >‪ <p‬في بداية النص وكذلك في نهاية النص‪:‬‬

‫التصحيح‬

‫‪4‬‬ ‫‪179‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫عدم ظهور الصورة على املتصفح‬

‫عدم ظهور الصورة في صفحة ‪Html‬‬
‫الخطأ‬

‫‪ -5‬خطأ إمالئي يتمثل في كتابة اسم العالمة بشكل خاطئ كالتالي‬

‫‪ -0‬كتابة مسارالصورة بشكل غيرسليم فقد تكون الصورة موجودة داخل مجلد اخر‬ ‫السبب ‪/‬‬
‫األسباب‬

‫‪ -2‬عدم كتابة امتداد الصورة‬

‫‪ -5‬التأكد من كتابة عالمة الصورة بشكل سليم وصحيح>‬

‫‪ -0‬التأكد من كتابة مسارمكان وجود الصورة بالشكل التالي ‪:‬‬

‫‪images‬‬
‫التصحيح‬

‫‪book.jpg‬‬
‫‪ -2‬التأكد من كتابة امتداد الصورة ‪:‬‬

‫‪5‬‬ ‫‪180‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫االرتباط التشعبي غير ّ‬

‫مفعل‬
‫عدم االنتقال الى الصفحة التالية عند الضغط على االرتباط التشعبي‬
‫الخطأ‬

‫‪ -5‬عدم كتابة اسم الصفحة التي سيتم االنتقال اليها‪:‬‬

‫‪ -0‬عدم كتابة امتداد اسم الصفحة‪:‬‬ ‫السبب ‪/‬‬

‫األسباب‬

‫‪ -2‬خطأ امالئي في كتابة عالمة ‪href‬‬

‫‪ -5‬التأكد من كتابة اسم الصفحة واالمتداد بشكل سليم‬

‫التصحيح‬
‫‪ -0‬التأكد من كتابة العالمة ‪ href‬بشكل سليم‬

‫‪6‬‬ ‫‪181‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء الجداول‬
‫ظهور خاليا الجدول بجانب صف العنوان‬ ‫الخطأ‬

‫‪ -5‬عدم كتابة العالمة الخاصة بالجدول >‪<table‬‬

‫‪ -0‬عدم كتابة العالمة الخاصة بخاليا بالجدول >‪<tr‬‬
‫السبب ‪/‬‬
‫األسباب‬

‫التأكد من كتابة العالمة الزوجية >‪ <table‬الخاصة بالجدول وكذلك العالمة الزوجية >‪<tr‬‬
‫الخاصة بخاليا الجدول‪:‬‬

‫التصحيح‬

‫‪7‬‬ ‫‪182‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء الـ ‪)5 ( Forms‬‬

‫الخطأ‬
‫عند الضغط على زر ‪ submit‬ال يتم تنفيذ املطلوب‬

‫‪-5‬خطأ امالئي في كتابة عالمة النموذج ‪form‬‬

‫السبب ‪/‬‬
‫األسباب‬

‫‪-0‬عدم تحديد صفحة ‪ php‬التي ستتم بها عملية معالجة البيانات‬

‫‪-5‬عند اضافة نموذج داخل الصفحة يجب التأكد من كتابة عالمة النموذج ‪ form‬بشكل صحيح‬

‫التصحيح‬
‫‪-0‬التأكد من كتابة اسم الصفحة التي ستتم بها عملية املعالجة‬

‫‪8‬‬ ‫‪183‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء الـ ‪)0 ( Forms‬‬

‫ظهور الشاشات التالية التي تدل على عدم وجود الصفحة عند الضغط على مفتاح ‪submit‬‬
‫الخطأ‬

‫‪-5‬عدم كتابة امتداد الصفحة التي ستتم معالجة البيانات فيها‬

‫السبب ‪/‬‬
‫‪-0‬عدم تشغيل الخادم قبل استعراض صفحة الويب‪.‬‬ ‫األسباب‬

‫‪-5‬يجب التأكد من كتابة امتداد الصفحة بعد كتابة اسمها مباشرة بحيث يفصل بينهما نقطة (‪) .‬‬

‫‪ -0‬التأكد من تشغيل الخادمين ‪ Apache‬و ‪.Mysql‬‬ ‫التصحيح‬

‫‪9‬‬ ‫‪184‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء الـ ‪)2 ( Forms‬‬

‫ظهور الشاشة التالية عند الضغط على مفتاح ‪ submit‬رغم كتابة اسم وامتداد الصفحة ‪:‬‬

‫الخطأ‬

‫السبب ‪/‬‬
‫عدم كتابة عنوان الصفحة من خالل ‪usbwebserver‬‬
‫األسباب‬

‫التأكد من استعراض امللف من خالل العنوان ‪ localhost:8080/File_path‬وليس بالضغط على‬

‫ً‬
‫اسم امللف ضغطا مزدوجا‪.‬‬ ‫التصحيح‬

‫‪11‬‬ ‫‪185‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء الـ ‪)2 ( Forms‬‬

‫عدم ظهور مربع النص ألحد مدخالت النموذج‬

‫الخطأ‬

‫خطأ امالئي يتمثل في كتابة اسم العالمة ‪ input‬بشكل غيرصحيح‬ ‫السبب ‪/‬‬
‫األسباب‬

‫التأكد من كتابة عالمة ‪ input‬بشكل صحيح ‪.‬‬

‫التصحيح‬

‫‪11‬‬ ‫‪186‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫ً‬
‫ثانيا‪ :‬األخطاء الشائعة في تنسيق صفحات الويب باستخدام ‪:CSS‬‬

‫أخطاء تنسيقات ‪)5 ( Css‬‬

‫الخطأ‬
‫عدم ظهور تنسيقات ملف ‪ Css‬على الصفحة ‪start.html‬‬

‫السبب‬
‫خطأ في كتابة االرتباط بين ملف ‪ Css‬بصفحة ‪Html‬‬

‫التأكد من كتابة االرتباط بشكل صحيح من حيث العالقة بين ملف التنسيق والصفحة ‪ ،‬وكذلك‬
‫اسم وامتداد ومكان الصفحة‬ ‫التصحيح‬

‫‪12‬‬ ‫‪187‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء تنسيقات ‪)0 ( Css‬‬

‫عدم ظهور تنسيقات العنوان ‪: h1‬‬
‫الخطأ‬

‫السبب‬
‫خطأ لغوي يتمثل في كتابة التنسيق بشكل خاطئ‬

‫التأكد من اضافة ( ‪ ) :‬بين الخاصية وقيمتها‪.‬‬ ‫‪-5‬‬

‫التأكد من اضافة الفاصلة املنقوطة ( ; ) بين التنسيقات ‪.‬‬ ‫‪-0‬‬
‫التأكد من كتابة اسم العالمة بشكل صحيح ‪.‬‬ ‫‪-2‬‬
‫التأكد من كتابة اسم الخاصية املطلوبة بشكل صحيح‪.‬‬ ‫‪-2‬‬
‫التصحيح‬

‫‪13‬‬ ‫‪188‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء تنسيقات ‪)2 ( Css‬‬

‫عدم ظهور تنسيقات الـ ‪ div‬املسمى ‪ sidebar‬بشكل صحيح ‪.‬‬

‫الخطأ‬

‫السبب ‪/‬‬
‫‪ -5‬عدم وضع عالمة النقطة ( ‪ ) .‬قبل الـ ‪ div‬من النوع كالس ‪. class‬‬ ‫األسباب‬
‫‪ -0‬اختالف اسم الـ ‪ div‬في صفحة ‪ html‬عن االسم املوجود في ملف التنسيق ‪.‬‬

‫‪ -5‬التأكد كتابة عالمة النقطة ( ‪ ) .‬قبل اسم الـ ‪ div‬للداللة على أنها من النوع كالس ‪. class‬‬
‫‪ -0‬التأكد من أن اسم الـ ‪ div‬املكتوب في ملف التنسيقات هو نفسه املكتوب في صفحة‬
‫‪.html‬‬
‫‪ -2‬التأكد من وضع عالمة ( ; ) بين التنسيقات ‪.‬‬

‫التصحيح‬

‫‪14‬‬ ‫‪189‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫ً‬
‫ثالثا‪ :‬األخطاء الشائعة في البرمجة بلغة ‪:PHP‬‬
‫‪ )5‬نموذج لبرنامج ‪ ( PHP‬يحتوي البرنامج أخطاء مفتعلة)‪:‬‬

‫رقم السطر‬ ‫التعليمات الربجمية‬

‫‪1‬‬
‫‪2‬‬ ‫‪ */‬االتصال بقاعدة البيانات *‪/‬‬
‫‪3‬‬ ‫)‪includ(conect.php‬‬
‫‪4‬‬
‫‪5‬‬ ‫‪*/‬إدراج مجلة الربط مبلف التنسيق قصد تطبيق تنسيق للجدول *‪/‬‬
‫‪6‬‬ ‫;">‪echo "<link href='formatting.css' rel='stylesheet' type='text/css'/‬‬
‫‪7‬‬
‫‪8‬‬ ‫مجلة االستعالم عن السجالت اليت عدد نسخ الكتب فيها أقل من القيمة املدخلة يف *‪/‬‬
‫‪*/‬النموذج‬
‫‪9‬‬ ‫< ‪$sql = "select from books where copies_book‬‬
‫;"']‪'$_REQUEST[COPIES_BOOK‬‬

‫‪10‬‬
‫‪11‬‬ ‫‪ */‬دالة تنفيذ االستعالم *‪/‬‬
‫‪12‬‬ ‫;)‪$result=mysqli_query($con‬‬

‫‪13‬‬
‫‪14‬‬ ‫‪*/‬إدراج رأس اجلدول الذي سيحتوي عناوين األعمدة *‪/‬‬
‫‪15‬‬ ‫;>‪echo <table‬‬
‫‪16‬‬ ‫;">‪echo "<tr‬‬
‫‪17‬‬ ‫;">‪echo "<th>BOOK ID</th‬‬
‫‪18‬‬ ‫;">‪echo "<th>TITLE BOOK</th‬‬
‫‪19‬‬ ‫;">‪echo "<th>DATE OF EDITION</th‬‬
‫‪20‬‬ ‫;">‪echo "<th>NUMBER OF COPIES</th‬‬
‫‪21‬‬ ‫;">‪echo "<tr‬‬

‫‪15‬‬ ‫‪190‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫رقم السطر‬ ‫التعليمات الربجمية‬

‫‪22‬‬
‫‪23‬‬ ‫‪ */‬اجلملة التكرارية لعرض السجالت احملددة يف نتيجة االستعالم*‪/‬‬
‫‪24‬‬ ‫))‪while($row=mysqli_fetch_array($result‬‬
‫‪25‬‬ ‫{‬
‫‪26‬‬ ‫‪ */‬إدراج صف جديد لكل سجل جديد *‪echo "<tr>"; /‬‬
‫‪27‬‬ ‫خلية احلقل األول للجدول *‪echo "<td>".$row['id_book']."</td>"; /‬‬
‫‪*/‬‬
‫‪28‬‬ ‫خلية احلقل الثاني *‪echo "<td>".$row['title_book']."</td>"; /‬‬
‫‪ */‬للجدول‬
‫‪29‬‬ ‫خلية احلقل الثالث *‪echo "<td>".$row['doe_book']."</td>"; /‬‬
‫‪ */‬للجدول‬
‫‪30‬‬ ‫خلية احلقل الرابع *‪echo "<td>".$row['copies_book']."</td>"; /‬‬
‫‪ */‬للجدول‬
‫‪31‬‬
‫‪32‬‬ ‫‪ */‬نهاية الصف *‪echo"</tr>"; /‬‬
‫‪33‬‬ ‫}‬ ‫‪ */‬قوس نهاية اجلملة التكرارية *‪/‬‬
‫‪34‬‬ ‫‪ */‬إغالق اجلدول *‪echo "</table>"; /‬‬

‫‪35‬‬
‫‪36‬‬ ‫‪ */‬إغالق االتصال بقاعدة البيانات *‪/‬‬
‫‪37‬‬ ‫;)‪mysqli_close($con‬‬

‫‪16‬‬ ‫‪191‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫‪ )0‬األخطاء املفتعلة في املثال‪:‬‬

‫ظهور جمل ‪ PHP‬عند استعراض ملف ويب‬
‫عند استعراض امللف وتنفيذ االستعالم ظهرت جمل البرمجة ‪ PHP‬نفسها على املتصفح‬
‫الخطأ‬

‫‪ .5‬عدم إدراج عالمة ‪ <?php‬في بداية التعليمات البرمجية‬

‫السبب ‪/‬‬
‫األسباب‬
‫‪ .0‬لم يتم فتح امللف من خالل الخادم‪ .‬مثال ‪:‬‬

‫‪ .5‬التأكد من وجود العالمة ‪ <?php‬قبل البدء بكتابة الجمل البرمجية و التأكد من إدراج‬
‫العالمة ?< إثراالنتهاء من كتابة الجمل البرمجية‪.‬‬

‫التصحيح‬
‫‪ .0‬التأكد من استعراض امللف من خالل العنوان ‪ localhost:8080/File_path‬وليس‬
‫بالضغط عليه مرتين‪.‬‬

‫‪17‬‬ ‫‪192‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫ظهور رسالة ‪Unable to access the network‬‬

‫ظهور رسالة "‪ "Unable to access the network‬في املتصفح عند استعراض صفحة ويب‪.‬‬ ‫الخطأ‬

‫لم يتم تشغيل الخادم قبل استعراض صفحة الويب‪.‬‬

‫السبب ‪/‬‬
‫األسباب‬

‫التأكد من تشغيل الخادمين ‪ Apache‬و ‪Mysql‬‬

‫التصحيح‬

‫‪18‬‬ ‫‪193‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫خطأ في استدعاء دالة ‪Call to undefined function function_name() …. -‬‬

‫‪Fatal error: Call to undefined function includ( ) in line 3‬‬ ‫الخطأ‬

‫تفسيرالخطأ ‪ :‬استدعاء دالة غير ّ‬

‫معرفة‪.‬‬

‫خطأ إمالئي يتمثل في كتابة اسم الدالة بشكل خاطئ‪ .‬أالحظ في املثال أعاله أن الدالة )(‪include‬‬
‫كتبت بالشكل اآلتي )'‪includ('connect.php‬‬
‫ينقص الحرف ‪ e‬نهاية اسم الدالة‪.‬‬
‫سيظهرنفس الخطأ في حال كتبت أي دالة من الدوال اآلتية بشكل إمالئي خاطئ‪:‬‬ ‫السبب ‪/‬‬
‫‪include( ) ‬‬ ‫األسباب‬
‫‪mysqli_connect( ) ‬‬
‫‪mysqli_query( ) ‬‬
‫‪mysqli_fetch_array( ) ‬‬
‫‪mysqli_affected_rows( ) ‬‬
‫‪mysqli_close( ) ‬‬

‫التأكد من كتابة اسم الدالة بالشكل الصحيح‪.‬‬ ‫التصحيح‬

‫في املثال أعاله‪ ،‬تعديل اسم الدالة إلى‪include('connect.php') :‬‬

‫‪19‬‬ ‫‪194‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫خطأ في كتابة اسم امللف املستدعى ( ‪)5‬‬

‫‪Warning: include(conect.php): failed to open stream ------ in line 3‬‬
‫الخطأ‬

‫تفسيرالخطأ ‪ :‬فشل في فتح ملف مستدعى‬

‫السبب ‪/‬‬
‫األسباب‬
‫امللف املطلوب استدعائه كتب بشكل خاطئ ‪conect.php‬‬

‫التصحيح‬
‫تصحيح اسم امللف بإضافة حرف ‪ n‬كاآلتي ‪include('connect.php') :‬‬

‫خطأ في كتابة اسم امللف املستدعى ( ‪)0‬‬

‫‪Notice: Use of undefined constant connect ------ in line 3‬‬ ‫الخطأ‬

‫السبب ‪/‬‬
‫األسباب‬
‫اعتبرالخادم أن اسم امللف ‪ connect‬هو اسم لثابت‪ ،‬ألنه لم يتم حصره بين عالمتي تنصيص‪.‬‬

‫التصحيح‬
‫حصرامللف املستدعى بين عالمتي تنصيص‪ ،‬هكذا ‪include('connect.php') :‬‬

‫‪21‬‬ ‫‪195‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫خطأ في االتصال بقاعدة البيانات‬

‫‪Warning: mysqli_connect():Unknown database 'libary' in C:\USBWebserver‬‬
‫‪v8.6\root\Library\connect.php on line 2‬‬

‫الخطأ‬

‫تفسيرالخطأ ‪ :‬قاعدة بيانات غيرمعروفة‪.‬‬

‫عندما تواجهك عبارة ‪ ، unknown database‬هذا يدل على ‪:‬‬
‫السبب ‪/‬‬
‫‪ .5‬خطأ في كتابة اسم قاعدة البيانات أو‬
‫األسباب‬
‫‪ .0‬أنها غيرموجودة أصال‪.‬‬
‫و كما نالحظ في املثال أعاله‪ ،‬لم يتم التعرف على قاعدة البيانات "‪ ، "libary‬والخطأ هنا يكمن في‬
‫كتابة اسمها بشكل غير صحيح (االسم ينقصه الحرف ‪ r‬بعد الحرف ‪. ) b‬‬

‫‪ .5‬تعديل اسم قاعدة البيانات‪:‬‬

‫;)"‪$con = mysqli_connect("localhost", "root", "usbw", "library‬‬
‫‪ .0‬التأكد من وجود قاعدة البيانات من خالل الخادم ‪:‬‬

‫التصحيح‬

‫‪21‬‬ ‫‪196‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء في بناء جملة ‪) 5 ( PHP‬‬

‫‪Parse error: syntax error, unexpected 'echo' in ---------------------- line 6‬‬
‫الخطأ‬
‫تفسيرالخطأ ‪ :‬يفيد هذا الخطأ أنه لم يكن من املنتظرأن يقرأ مترجم ‪ php‬عبارة ‪ echo‬بل كان‬
‫من املفترض قراءة ش يء آخرقبل هذه العبارة‪ .‬ولذلك وجب التأكد من الجزء الناقص قبل عبارة‬
‫‪ echo‬السطر‪.6‬‬
‫إذا تحرينا السطرالسابق لعبارة ‪( echo‬دون اعتبارسطور التعليقات) نجد أنه لم يتم إنهاء‬
‫الجملة البرمجية السابقة (السطررقم ‪)2‬بعالمة الفاصلة املنقطة‪.‬‬

‫السبب ‪/‬‬
‫األسباب‬

‫‪ ‬وسيظهرلنا نفس نوع الخطأ الذي يبدأ بعبارة‬

‫(‪)Parse error: syntax error, unexpected ---------------------------‬‬
‫إذا نسينا أحد املكونات األساسية في بناء الجملة البرمجية بلغة ‪ php‬مثل (الفاصلة‪/‬‬
‫الفاصلة املنقطة ‪ /‬كتابة األمر‪ echo‬بشكل خاطئ ‪ /‬عالمات التنصيص ‪ /‬النقطة ‪/‬‬
‫العالمة ] [ ‪.) ....‬‬
‫إنهاء الجملة البرمجية بعالمة الفاصلة املنقطة‪.‬‬
‫التصحيح‬

‫‪22‬‬ ‫‪197‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء في بناء جملة ‪) 0 ( PHP‬‬

‫‪Parse error: syntax error, unexpected '<' ------- in line 15‬‬ ‫الخطأ‬

‫تفسيرالخطأ ‪ :‬ليس من املنتظرتلقي عالمة '<' ‪ -----‬في السطر ‪51‬‬

‫السبب ‪/‬‬
‫استخدام عالمة ‪ HTML‬في جملة بلغة البرمجة ‪ PHP‬دون حصرها بين عالمتي تنصيص هكذا‪:‬‬
‫األسباب‬

‫حصرأي عالمة ‪ HTML‬نود استخدامها في برنامج بلغة ‪ PHP‬بين عالمتي تنصيص كاآلتي‪:‬‬ ‫التصحيح‬

‫‪23‬‬ ‫‪198‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء خصائص الدوال ( ‪) 5‬‬

‫‪Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result,-- in line‬‬
‫‪24‬‬ ‫الخطأ‬

‫تفسيرالخطأ ‪ :‬من املنتظرأن تكون خاصية الدالة )(‪ mysqli_fetch_array‬تمثل نتيجة استعالم‬
‫في السطر ‪02‬‬
‫لم يتم حفظ أي من حقول السجالت الناتجة عن استعالم تحديد السجالت في املتغير‬
‫السبب ‪/‬‬
‫‪ ،$result‬حيث نالحظ أنه بعد عبارة ‪( Select‬السطر‪ )1‬لم يرد أي من أسماء الحقول املراد‬
‫األسباب‬
‫عرضها كما لم تكن هناك عالمة (*) للداللة على عرض جميع الحقول‪.‬‬

‫ّ‬
‫إدراج عالمة النجمة (*) بعد عبارة ‪ Select‬في السطر‪ 1‬للداللة على أنني أريد عرض جميع‬
‫حقول السجل‪.‬‬ ‫التصحيح‬

‫‪24‬‬ ‫‪199‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء خصائص الدوال ( ‪) 0‬‬

‫‪Warning: mysqli_query() expects at least 2 parameters, 1 given -‬‬
‫‪----- in line 12‬‬
‫الخطأ‬

‫تفسيرالخطأ ‪ :‬من املنتظر أن تأتي الدالة )(‪ ،mysqli_query‬مصحوبة بخاصيتين اثنتين‪ ،‬تم تلقي‬
‫خاصية واحدة فقط ‪ -----‬في السطر‪.50‬‬
‫السبب ‪/‬‬
‫يوضح الخطأ هنا أن الدالة )(‪ mysqli_query‬يجب أن تكون مصحوبة بخاصيتين‪ ،‬ولكنها‬ ‫األسباب‬
‫جاءت بخاصية واحدة فقط وهي (‪)$sql‬‬

‫‪ .5‬إدراج الخاصية الناقصة (‪ )$con‬في الدالة‪.‬‬ ‫التصحيح‬

‫ثم‪ ،‬أتأكد من أنني أدرجت الخاصية الناقصة في املكان املناسب‪ ،‬أالحظ ذلك في الخطأ التالي ‪:‬‬

‫‪25‬‬ ‫‪200‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء خصائص الدوال ( ‪) 2‬‬

‫‪Warning: mysqli_query() expects parameter 1 to be mysqli, ------‬‬
‫‪in line 12‬‬ ‫الخطأ‬

‫تفسيرالخطأ‪ :‬من املنتظرأن تكون الخاصية األولى من نوع ‪ mysqli‬أي يجب أن تمثل الخاصية‬
‫األولى متغيراالتصال بقاعدة البيانات (‪)$con‬‬

‫السبب ‪/‬‬
‫األسباب‬
‫لم يتم إدراج خصائص الدالة باملكان املناسب‪.‬‬

‫تعديل ترتيب خصائص الدالة كاآلتي ‪:‬‬ ‫التصحيح‬

‫‪26‬‬ ‫‪201‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬
 ‫األخطاء الشائعة يف الربجمة بلغة ‪Html/Css/php‬‬

‫أخطاء خصائص الدوال ( ‪) 2‬‬

‫‪Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result ------- in‬‬
‫‪line 24‬‬ ‫الخطأ‬

‫تفسيرالخطأ ‪ :‬من املنتظرأن تكون خاصية الدالة )(‪ّ mysqli_fetch_array‬‬

‫متغيرا لنتيجة‬
‫استعالم (يحفظ مجموعة من السجالت) ‪ -------‬في السطر ‪02‬‬

‫السبب ‪/‬‬
‫لم يتم إدراج الخاصية املناسبة للدالة )(‪mysqli_fetch_array‬‬ ‫األسباب‬

‫من املفروض أن تكون الخاصية هي املتغيرالذي يحفظ نتيجة تنفيذ االستعالم‪.‬‬ ‫التصحيح‬

‫‪27‬‬ ‫‪202‬‬
‫َد من إدارة املناهج – وزارة الرتبية والتعليم – مملكة البحرين‬
‫هذا املؤلف مُع ٌّ‬