‫ػمـر األميـــه‬

‫حظميم مىاقغ اوخروج‬

‫‪HTML, XHTML & CSS‬‬

‫هذه افْسخة آفُسؤٕة وادىابَ ـ ــة متاما فِْسخة ادىب ـ ـ ــقظة إٓ ؾهال واحدا‬
‫هدية مـ أخٔـ ـ ـ ــُؿ ظّر إمغ‪ -‬مـ يريد ٕسخة مىبقظة يُّْف ذائٓا مـ‬
‫مقؿع فقفق مـ خالل زيارتف هلذه افهٍحة‪-‬‬

‫افَّرية فِْؼ احلر‬

 ‫افىبًة إوػ‬

‫‪ 1/01‬م ‪ 0323 ,‬ـه‬

‫©‪ 3102‬حَقق افىبع وافْؼ حمٍقطة فِّٗفػ‬

‫‪ISBN 978-1-291-74351-7‬‬
‫ؿديام ؿال افَّريقن‪ 9‬يقفد افقفد مـ واحدة‪ ،‬فُـ ـثرون هؿ مـ ينارـقن ذم تربٔتف‬

‫ؾ٘ػ ـؾ مـ شاهؿ ذم تربٔتل وهتذيبل‪--------------------‬أهدي هذا افُتاب‬

‫صُر خاص‬

‫إػ مهدر ؿقيت ومْبع ضاؿتل ورس شًاديت‪ ----‬إخقيت‬

‫أحبُؿ حبا فق مر ظذ أرض ؿاحِة‪---‬‬

‫فتٍجرت مْٓا يْابٔع ادحبة‪-‬‬

‫أساسياث نغت ‪XHTML‬‬
‫تهّٔؿ صٍحة ويب أشاشٔة‬
 ‫متٓٔد‬ ‫‪0‬‬

‫‪ 0-0‬مقاؿع إٓسٕت وـٍٔٔة ظِّٓا‬

‫ـٔػ تًّؾ مقؿع افقيب ؟ حسْا‪ ،‬إذا ـْت مٓتام بٍُٔٔة تهّٔؿ مقاؿع افقيب ؾحتام أنؽ متُّـ مـ‬
‫اشتخدام إسٕت‪ -‬دظْل أحزر أول ما تَقم بف بًد تنٌٔؾ حاشقبؽ‪ 9‬تَقم بٍتح متهٍح افقيب ومـ‬
‫ثؿ تذهب إػ مقؿع ؾٔسبقك‪ ،‬هؾ أنا حمؼ ؟ دظْل أشٖخؽ شٗال ماذا حيدث ظْدما توع‬
‫‪www.Facebook.com‬ظذ ادتهٍح ثؿ توٌط زر آدخال )‪ (Enter‬؟ يَقم ادتهٍح بٍتح‬
‫مقؿع ؾٔسبقك‪ ،‬ممتاز جقابؽ حتك أن‪ ،‬صحٔح مئة ذم ادئة فُـ إذا ـْت تريد أن تهبح مهّؿ‬
‫مقاؿع ويب ؾٔجب أن يُقن جقابؽ أـثر دؿة مـ ذفؽ‪ ،‬أظْل جيب أن تًرف بافتٍهٔؾ ما حيدث‬
‫بافًٍؾ مـ افْاحٔة افٍْٔة‪ ،‬فُـ ٓ تَِؼ شٖؿدم فؽ اجلقاب ظذ ضبؼ مـ ذهب فُـ ؿبؾ ذفؽ دظْا‬
‫ًٕرف أوٓ ما هق مقؿع افقيب ؟‬

‫ظرؾت مقؿع وئُبٔديا مقؿع افقيب أنف‪ « 9‬جمّقظة صٍحات ويب مرتبىة ببًوٓا افبًض وخمزٕة ظذ‬
‫ٍٕس اخلادم ش‪-‬‬

‫هؾ تتذـر خىقات دخقفؽ ظذ ؾٔسبقك ؟ أوٓ تَقم ب٘خال اشؿ ؾٔسبقك ظذ ادتهٍح ؾتيٓر فؽ‬
‫افهٍحة إوػ‪ ،‬تَقم بًدها ب٘دخال بٔإاتؽ‪ ،‬ؾتْتَؾ مباذة إػ داخؾ حسابؽ ومـ ثؿ يُّْؽ‬
‫مناهدة افرشائؾ اجلديدة أو زيارة صٍحات أصدؿائؽ‪ ،‬أو افبحث ظـ أصدؿاء جدد‪ ،‬يًْل وأنت ذم‬
‫صٍحة يُّْؽ إٓتَال إػ احدى افهٍحات ادرتبىة بافهٍحة افتل أنت ؾٔٓا‪ ،‬هذا هق ادًْك ادراد بـ‬
‫‪ « 9‬جمّقظة صٍحات ويب مرتبىة ببًوٓا افبًض ش أما « خمزٕة ظذ ٍٕس اخلادم ش ؾاخلادم هق‬
‫حاشقب مثؾ حاشقبؽ متاما يتّٔز برسظتف افٍائَة وـقٕف متهؾ بٖنسٕت ‪ 13.13‬شاظة وظذ مدار‬
‫افسْة دون إَىاع‪ -‬تهقر يَْىع حقاشٔب (خقادم) ؾٔسبقك ٕهػ شاظة يًْل ماليغ افبؼ‬
‫يَْىًقن ظـ افًامل ددة ٕهػ شاظة‪.‬‬

‫‪2‬‬
‫وأن بًد أن ظرؾت أن مقؿع افقيب ما هل إٓ صٍحات خمزٕات ذم حاشقب متهؾ بٖنسٕت‪ ،‬ؾُٔػ‬
‫يتًرف ادتهٍح ظذ احلاشقب افذي خيزن ادقؿع ادراد زيارتف مـ بغ ماليغ احلقاشٔب ادتهِة‬
‫بٖنسٕت ؟‬

‫إػ مـ ـإت آخر مُادة هاتٍٔة أجريتٓا ؟ حاذا ظْدما هتاتػ أمحد ٓ تذهب ادُادة إػ حمّقد ؟ حتام‬
‫جقابؽ هل‪ٕ 9‬ين ضِبت رؿؿ أمحد وفٔس حمّقد‪ -‬حسْا‪ ،‬ـام أن فُؾ هاتػ رؿؿ خاص ئّزه ظـ‬
‫ماليغ اهلقاتػ ذم افًامل ؾ٘ن فُؾ حاشقب رؿؿ خاص ئّزه ظـ ماليغ احلقاشٔب يسّك هذا افرؿؿ‬
‫بًْقان آي يب‪ ،(Internet Protocol( IP ،‬بروتقـقل إسٕت بافٌِة افًربٔة ويُقن بافْسبة‬
‫فِحقاشٔب ظذ افنُؾ افتايل‪ 58.060.118.00 9‬فُـ حا ـان مـ افهًب حٍظ هذه إرؿام تؿ‬
‫اخساع اشامء افْىاؿات حٔث يرتبط ـؾ اشؿ مع آي يب ؾّثال رؿؿ أي يب افسابؼ هق خاص بافْىاق‪9‬‬
‫‪ www.facebook.com‬ويًْل هذا افُالم أنؽ ظْدما تُتب ‪ www.facebook.com‬ظذ‬
‫ادتهٍح ؾٖنت تَقم ؾًِٔا بىِب احلاشقب افذي حيّؾ ادًرف ‪-58.060.118.00‬‬

‫ذم احلََٔة يّتِؽ ـؾ جٓاز رؿّل (حاشقب‪ ،‬هاتػ حمّقل‪ ،‬آخة ضابًة) مًرف رؿّل خاص بف هق‬
‫أي يب ي ستخدم هذا ادًرف فِتقاصؾ بغ إجٓزة افرؿّٔة شقاء فإلرشال أو آشتَبال ؾّثال ظْدما‬
‫تىِب مـ احلاشقب ضباظة رء ما ؾ٘ن احلاشقب تَقم ظز ادًرف اخلاص بف ب٘رشال افبٔإات إػ‬
‫افىابًة ا فتل تستَبؾ افبٔإات ظـ ضريؼ مًرؾٓا اخلاص‪ -‬هْا يًِب مًرف احلاشقب دور ادرشؾ بْٔام‬
‫يًِب مًرف افىابًة دور ادستَبؾ‪ ،‬فُـ بًد افىباظة يهبح إمر بافًُس حٔث يَقم افىابًة‬
‫ب٘رشال ٕتٔجة أمر افىباظة باإلجياب (ٕجاح افىباظة) أو افسِب (ؾنؾ افىباظة) ؾتُقن هبذا هل‬
‫ادرشِة واحلاشقب هق ادستَبؾ‪.‬‬

‫يُّـ تىبٔؼ هذا ادثال مع أي تقاصؾ حيهؾ بغ جٓازيـ رؿّٔغ شقاء مـ ٍٕس افْقع (حاشقب مع‬
‫حاشقب‪ ،‬أو هاتػ مع هاتػ) أو خمتٍِل افْقع (حاشقب مع ضباظة‪ ،‬أو حاشقب مع هاتػ حمّقل)‪،‬‬
‫ما هيّْا ذم ـؾ هذا هق افتقاصؾ افذي حيدث بغ حاشقبغ ؾًْدما يَقم أحدهؿ ب٘دخال ظْقان مقؿع‬
‫مًغ ظذ ادتهٍح ؾٓذا يًْل ضِب تقاصؾ جٓازه مع اجلٓاز افذي خيزن ادقؿع‪.‬‬

‫ٕسّل احلاشقب افذي يستخدمف افزائر مستخدم بْٔام ٕسّل احلاشقب افذي خيزن ادقؿع خادم‪،‬‬
‫وافنُؾ افتايل يبغ ـٍٔٔة افتقاصؾ بْٔٓام‪9‬‬

‫‪3‬‬
‫اخلىقة إوػ يَقم افزائر بُتابة اشؿ ادقؿع ظذ ادتهٍح ؾَٔقم متهٍح ادستخدم ب٘رشال افىِب إػ‬
‫اخلادم‬

‫أما ذم اخلىقة افثإٔة ؾَٔقم اخلادم بإتَاء افهٍحة ادىِقبة مـ بغ صٍحات ادقؿع ثؿ يرشِٓا إػ‬
‫افزئر‪.‬‬

‫باختهار ـِام َٕر افزائر ظذ احدى افروابط بادقؿع يَقم اجلٓاز ادستخدم ب٘رشال ضِب إػ اجلٓاز‬
‫اخلادم افذي يَقم هق بدوره ب٘رشال افهٍحة ادىِقبة إػ ادستخدم أو إرشال خىٖ ظْد ظدم افًثقر‬
‫ظذ افهٍحة ادىِقبة‪(-‬خىٖ ‪)3/3‬‬

‫‪ 0-1‬فٌات تهّٔؿ ادقاؿع‬

‫بام أنْا ؿِْا أن اخلادم خيزن صٍحات ويب ؾام هل هذه افهٍحات وما ماهٔتٓا ؟‬

‫صٍحة افقيب هق ٕاتج ـؾ صٍحة مُتقبة بٌِة ‪ xhtml‬و‪ ، CSS‬افٌِتغ إشاشٔتغ ذم تهّٔؿ أي‬
‫مقؿع ويب‪ -‬وجيدر آصارة أن هْاك افُثر مـ فٌات افزجمة افتل يستخدمٓا ادزجمقن فزجمة مقاؿع‬
‫افقيب فُـ مٓام ـإت افٌِة ادستخدمة ذم برجمة أي مقؿع ؾافنُؾ افْٓائل فِهٍحة يتحُؿ هبا هاتغ‬
‫افٌِتغ‪.‬‬

‫‪ Xhtml‬هل اختهار فـ ‪ eXtensible HyperText Markup Language‬وترمجٓا‬ ‫‪‬‬

‫وئُبٔديا بـ « فٌة رؿؿ افْص افٍائؼ افَابِة فِتّديد ش وهق امتداد فٌِة ‪ html‬بًد أن تؿ‬
‫إضاؾة ممٔزات ترـٔبة فٌة‪ -xml‬ويًتز ‪ xhtml‬افٌِة إشاشٔة ذم تهّٔؿ مقاؿع افقيب‬
‫ؾبٓذه افٌِة يتؿ ؾرز وتًريػ مجٔع حمتقيات مقؿع افقيب‪ ،‬ومـ ادُّـ تهّٔؿ مقؿع ـامؾ‬
‫باشتخدام هذه افٌِة ؾَط وبافىبع هذا ٕادر جدا‪.‬‬

‫‪4‬‬
‫‪ CSS‬هل اختهار فـ‪ Cascading Style Sheets‬وترمجٓا وئُبٔديا بـ « صٍحات‬ ‫‪‬‬
‫افىرز ادساصة ش بْٔام يىِؼ ظِٔٓا ؽافبٔة ادهّّغ بـ « صٍحات إنامط إٓسٔابٔة ش وأنا‬
‫أؾوؾ هذا إخر فدٓفتٓا افقاض حة‪ ،‬ومٓام يُـ اشّٓا‪ ،‬ما هيّْا هق مًرؾة أهنا تستخدم‬
‫فتْسٔؼ صُؾ وّٕط طٓقر حمتقى افهٍحة‪ ،‬ـافِقن افذي جيب أن ييٓر ظِٔف افْص أو‬
‫احلجؿ‪.‬‬

‫ربام يربُؽ ؿقيل أنؽ حتتاج إػ هاتغ افٌِتغ فتهّٔؿ مقؿع ويب فُـ ٓ ختػ ؾإمر ذم ؽاية‬
‫افسٓقفة ـؾ ما ظِٔؽ مًرؾتف أن هق أن افقاؿع افًّع يَتيض اشتخدام ‪ xhtml‬إلضاؾة ظْاس‬
‫افهٍحة و ‪ CSS‬فتْسٔؼ ّٕط طٓقر هذه افًْاس‪ ،‬يًْل هدف اشتخدام هاتغ افٌِتغ هق افٍهؾ‬
‫بغ ادوّقن وافنُؾ‪ ،‬و فتقضٔح افٍُرة إير إػ إصُال افتافٔة‪.‬‬

‫افنُؾ ‪ 90-0‬هذه صٍحة وب باشتخدام فٌة ‪ xhtm‬وحدها‬

‫‪5‬‬
 ‫افنُؾ ‪ 91-0‬هذه ٍٕس افهٍحة بًد تًديؾ صُؾ طٓقر ادحتقى باشتخدام ‪CSS‬‬

‫افنُؾ ‪ 92-0‬وأخرا هذه ٍٕس افهٍحة افسابَة فُـ مع تًديالت ‪ CSS‬أخرى‪-‬‬

‫‪6‬‬
‫ـام هق مالحظ ذم إصُال افثالثة افسابَة يُّْْا بقاشىة ‪ CSS‬تًديؾ صُؾ طٓقر صٍحة مُتقبة‬
‫بٌِة ‪ xhtml‬ـام ٕناء بؾ ويُّْْا بقاشىة ‪ CSS‬تقؾر أصُال خارجل خمتٍِة مع آحتٍاظ بٍْس‬
‫ظْاس ‪ xhtml‬وٕسك فِزائر حرية اختٔار افنُؾ افذي يًجبف أـثر‪-‬‬

‫‪ 0-2‬إدوات افالزمة‬

‫‪ 0-2-0‬متهٍح ويب‬

‫متهٍح افقيب هق افزٕامج ادستخدم ٓشتًراض مقاؿع افقيب‪ ،‬ـٕ٘سٕت إـسبِقرر و مقزيال‬
‫َؾ ْر ُؾُْس ظذ شبٔؾ ادثال‪ -‬وادتهٍحات هل ـٌرها مـ افزامج ختتِػ ظـ بًوٓا افبًض ذم ـٍٔٔة‬
‫ظِّٓا‪ ،‬ويتّٔز متهٍح ظـ آخر ذم مجِة مـ اخلهائص مْٓا إداء وافرسظة وافقطائػ وادٓام‪ ،‬فذا‬
‫ؾادستخدم جيب أن يتحذ بقء مـ افثَاؾة ظـ ادتهٍحات حتك يستىٔع اختٔار ادتهٍح إنسب‪،‬‬
‫أما ـّهّؿ مقاؿع ؾإمر يتًدى ذفؽ إػ مًرؾة مدى دظؿ ادتهٍحات ٔخر افتُْقفقجٔات‬
‫وخاصة تِؽ ادتًَِة بٌِتل تهّٔؿ مقاؿع افقيب ‪ xhtml‬و ‪ CSS‬هبدف إناء مقؿع ؿادر ظذ‬
‫افيٓقر بنُؾ مالئؿ مع مجٔع ادتهٍحات أو ظذ إؽِب إـثر صٓرة واشتخداما‪.‬‬

‫ٕستًرض بنُؾ رسيع ذم هذه افَْىة ادتهٍحات إـثر اشتخداما مع بٔان أبرز ادٔزات فُؾ مْٓا‬
‫مـ ٕاحٔة آشتخدام أما افْاحٔة افٍْٔة ؾسْتًرض هلا خالل افدروس افالحَة‪.‬‬

‫ؽقؽؾ ـروم‪:‬‬

‫‪7‬‬
 ‫افنُؾ ‪3-0‬‬

‫ـروم هق متهٍح ويب جماين ومٍتقح ادهدر مـ تىقير ذـة جقجؾ‪ ،‬تؿ صدور اإلصدارة‬
‫افتجريبٔة مـ افزٕامج يقم ‪ 6‬أـتقبر ‪ 1//8‬ورسظان ما أوجد فٍْسف مُإا ذم شقق ادتهٍحات‬
‫وأصبح افٔقم ضّـ أول ثالثة متهٍحات إـثر اشتخداما‪.‬‬

‫أهؿ ما ئّز ـروم هل افرسظة افٍائَة ذم حتّٔؾ افهٍحات فذا فٔس مـ افًجب اذ أصبح مٍوال فدى‬
‫مجٓقر ادستخدمغ افًاديغ افذيـ يستخدمقن إسٕت ؾَط فِسؾٔف أو ٕظامل ٓ حتتاج إػ أـثر مـ‬
‫جمرد حتّٔؾ بًض افهٍحات‪ -‬إضاؾة هلذا ؾٓق يَِك ؿبقٓ جٔدا فدى مجٓقر مستخدمل خدمات‬
‫جقجؾ فتًامِف اجلٔد مًٓا‪ ،‬ومـ ادتقؿع جدا أن يزيد حهة متهٍح جقجؾ ـروم ذم افسقق بًد أن‬
‫تؿ اضالق خدمة حتُؿ احلقاشٔب ظـ بًد مـ خالل ادتهٍح‪ ،‬وهل خدمة جديدة أضَِٓا ؽقؽؾ ذم‬
‫‪ 18‬مايق ‪.1/01‬‬

‫ر ُؾُْس‪:‬‬
‫مقزيال َؾ ْ‬

‫َؾ ْر ُؾُْس هق متهٍح جماين مٍتقح ادهدر مـ تىقير افًديد مـ ادزجمغ ادتىقظغ بتْسٔؼ واذا ف‬
‫ر ُؾُْس صإع ثقرة ادتهٍحات وأول مْاؾس دتهٍح إسٕت إـسبِقرر‬
‫مـ مٗشسة مقزيال‪ -‬يًتز َؾ ْ‬

‫‪8‬‬
‫ر ُؾُْس هق ؿابِٔتٓا فِتخهٔص مـ خالل افُثر مـ آمتدادات‬
‫مـ مايُروشقؾت‪ -‬أهؿ مٔزة فـ َؾ ْ‬
‫ادتقؾرة ظذ ادقؿع افرشّل فِّتهٍح‪ -‬وؿد حيل َؾ ْر ُؾُْس ظذ اظجاب ـثر مـ ادهّّغ‬
‫وادزجمغ واخلزاء بسبب هذه ادٔزة افتل تسّح هلؿ اضاؾة افًديد مـ ادٓام آضاؾٔة اهلادؾة إػ‬
‫تسٓٔؾ أظامهلؿ‪.‬‬

‫افنُؾ ‪4-0‬‬

‫إسٕت إـسبِقرر‪:‬‬

‫إسٕت اـسبِقرر هق مـ تىقير افًّالق مايُروشقؾت‪ ،‬ويديـ صٓرهتا إػ أنيّة ويْدوز ؾٓق يٖيت‬
‫مدمج مًٓا‪ -‬ما جًؾ مْٓا ادتهٍح إـثر صٓرة بال مْازع‪ ،‬فُـ بًد افثقرة افتل أحدثٓا َؾ ْر ُؾُْس‬
‫وتبًتٓا جقجؾ ـروم ؾ٘ن دمج اـسبِقرر مع أنيّة ويْدوز مل يًد وحدها شٔاشة ـاؾٔة فوامن‬
‫هّْٔتٓا ظذ افسقق فذا أصبح مايُروشقؾت هيتؿ أـثر ؾٖـثر بتىقير إسٕت اـسبِقرر‪ -‬يٖيت أمهٔة‬
‫إسٕت اـسبِقرر بافْسبة فِّهّؿ ـقهنا ادتهٍح إـثر اشتخداما فذا ظْد تهّٔؿ أي مقؿع ؾال بد‬
‫مـ احلرص ظذ أن يُقن مالئام هلا ‪.‬‬

‫أوبرا ‪:‬‬

‫‪0/‬‬
‫هق متهٍح ويب وباؿة إٕسٕت مـ تىقير ذـة برجمٔات أوبرا وهق متهٍح يّتاز بافرسظة ذم‬
‫افتهٍح واخلٍة وافقاجٓة اجلِّٔة افبسٔىة‪ -‬حيتقي ظذ افًديد مـ افقطائػ ادّٓة ـتحّٔؾ ادٍِات‬
‫ظـ ضريؼ افتقرٕت‪ ،‬ـام يدظؿ احلقاشٔب افنخهٔة واهلقاتػ ادحّقفة إضاؾة فًِديد مـ ادٔزات‪-‬‬
‫يًتز حهة أوبرا ضًٍٔة جدا ٕسبة إػ افقطائػ واخلدمات افتل يَدمٓا وما أضٍاه مـ مٔزات ظذ‬
‫ادتهٍحات ـُؾ‪ ،‬فُـ بافرؽؿ مـ هذا ؾٓق يًد مـ ادتهٍحات إـثر صٓرة ويُّْْل افَقل أن‬
‫مجٓقره مـ ادتخههغ واخلزاء افذيـ يِّقن بّٔزات هذا ادتهٍح بنُؾ ـبر‪.‬‬

‫شٍاري ‪:‬‬

‫هق متهٍح ويب مـ إٕتاج ذـة أبؾ ـّبٔقتر وافذي تهدره مدجما مع ٕيام افتنٌٔؾ اخلاص هبا ماك‬
‫أو إس إـس‪ -‬ينسك شٍاري مًيؿ ادتهٍحات ذم افهٍات إشاشٔة ـتقؾر ٕيام افتبقيب مثال‬
‫ويٍْرد بّٔزة تقؾر دؾس يْيؿ بىريَة تنبف افىريَة افتل يْيؿ هبا منٌؾ ادقشَٔك ‪ iTunes‬ادقشَٔك‬
‫ـام يٖيت مًف أجوا منٌؾ ادقشَٔك ‪ -QuickTime‬يٖيت أمهٔة شٍاري ـقهنا ادتهٍح ادّٓٔـ ظذ‬
‫أجٓزة احاك وافقحٔد ادستخدم ظذ اهلقاتػ افذـٔة مـ إتاج ذـة أبؾ‪-‬‬

‫‪ 0-2-1‬حمرر ٕهقص‬

‫حمرر افْهقص هق بّثابة افزٕامج افذي شَْقم بُتابة إوامر داخِف ؿبؾ أن َٕقم بحٍيٓا ـهٍحة‬
‫ويب‪ -‬هْاك ذم افقؿع افُثر مـ حمررات افْهقص بًوٓا أـثر تىقرا مـ أخر‪ ،‬وبًوٓا متخهص‬
‫فتهّٔؿ ادقاؿع وبًوٓا ٓ‪ ،‬مْٓا ما هق جماين ومْٓا ما هق دماري ومدؾقع افثّـ‪ ،‬فُـ حلسـ حيؽ‬
‫ٕحـ شْستخدم حمرر ٕيص جماين وذم ٍٕس افقؿت متىقر وفف افًديد مـ ادٔزات ادّٓة‪-‬‬

‫ؿبؾ أن أدفؽ ظذ ادحرر افذي شْستخدمف ٕحـ‪ ،‬أود أن أنبٓؽ أنف مـ ادُّـ اشتخدام أي حمرر‬
‫ٕيص مـ اختٔارك حتك وفق ـان ادٍُرة ادقجقدة ظذ أنيّة ويْدوز‪ ،‬وشتجدها ظذ ادسار افتايل‪9‬‬

‫‪Start > all programs > accessories > Notepad‬‬

‫‪00‬‬
 ‫افنُؾ ‪5-0‬‬

‫ادحرر‪Notepad++‬‬

‫هق حمرر ٕيص حر مٍتقح ادهدر يدظؿ افًديد مـ افٌِات ويَدم افًديد مـ ادزايا أبرزها إبراز تًابر‬
‫افٌِة بٖخقان خمههة أو ما يسّك )‪ (Syntax Highlighting‬بافٌِة إُِٓٔزية‪ ،‬ومتُـ هذه ادٔزة‬
‫اجلِّٔة مـ حسـ تْئؿ إوامر وشٓقفة مراجًتٓا‪ ،‬وهلذا افسبب أنهحؽ جدا باشتخدام هذا‬
‫ادحرر بدٓ مـ ادٍُرة افًادية‪ -‬يُّْؽ حتِّٔٓا وتْهٔبٓا ظذ جٓازك مـ خالل افرابىة افتافٔة ‪:‬‬

‫‪http://notepad-plus-plus.org/download/v6.1.3.html‬‬

‫‪01‬‬
 ‫افنُؾ ‪6-0‬‬

‫ؿِْا أن ادحرر إٕام ٕستخدمف فُتابة افتًِٔامت افزجمٔة ؾُٔػ ٕحٍظ افْاتج ـّقؿع ويب ؟‬

‫إم ر شٓؾ جدا فُـ خيتِػ حسب ٕقع ادحرر ادستخدم ؾ٘ن ـان حمرر ادستخدم بسٔط جدا مثؾ‬
‫ادٍُرة ؾًْدما َٕقم باحلٍظ جيب أن ٕبغ أنْا ٕريد احلٍظ ادِػ ـهٍحة ويب ظـ ضريؼ بٔان امتداد‬
‫ٕقع ادِػ ‪ html-‬أما فق ـان ادحرر ادستخدم مثؾ ٕقتباد‪ ++‬ؾإؽِب أهنا شتقؾر ؿائّة فالمتدادات‬
‫اددظقمة مـ ؿبؾ افزٕامج ظْدها َٕقم باختٔار امداد ‪ html-‬ـام هق مبغ ذم افنُِغ افتافٔتغ‪-‬‬

‫‪02‬‬
‫افنُؾ ‪ 97-0‬حٍظ بقاشىة ادٍُرة افبسٔىة (مالحية ذم بًض إنيّة افَديّة جيب وضع آشؿ‬
‫ـامِة مع آمتداد بغ ظالمتل تْهٔص وإٓ تؿ حٍظ ـِّػ ٕيص ظادي ‪)Txt‬‬

‫‪03‬‬
 ‫افنُؾ ‪8-0‬‬

‫وأن بًد أن تؿ حٍظ ادِػ يُّْؽ افَْر ظِٔف مرتغ وشتيٓر ظذ ادتهٍح ـٖي مقؿع ظادي ـام‬
‫يُّْؽ افَْر ظِٔف بزر افّٔغ ثؿ ؾتحٓا بقاشىة ٕقتباد‪ ++‬فِتًديؾ ظذ افتًِٔامت افزجمٔة‪-‬‬

‫‪04‬‬
 ‫صٍحتؽ إوػ‬ ‫‪1‬‬

‫‪ 1-0‬افًْاس وافقشقم‬

‫إلٕناء صٍحة ويب ؾْٕ٘ا ٕحتاج إػ أن ّٕع فِّتهٍح ما ٕريد أن حيتقهيا صٍحتْا ـًْقان‪ ،‬ؾَرة ٕص‬
‫أو صقرة‪ ،‬هذا ما ٕىِؼ ظِٔف بافًْاس ؾافًْقان ظْك‪ ،‬وؾَرة افْص ظْك آخر وـذفؽ افهقرة‪،‬‬
‫وهُذا ؾ٘ن صٍحة افقيب شتتنُؾ مـ ظدة ظْاس متسِسِة ومتتافٔة‪-‬‬

‫أما إلٕناء ظْك ؾْٕ٘ا ٕحتاج إػ تًريػ وحتديد ٕقع افًْك افذي ٕقد إٕنائف إذا ما ـإت ظْقان‪،‬‬
‫ؾَرة ٕص أو صقرة أو ؽر ذفؽ مـ افًْاس‪ ،‬ظْدها ٕستخدم ما يسّك "افقشقم" حٔث فُؾ ظْك‬
‫وشؿ خاص يًتز ـًّرف فف بّجرد أن يَرأه ادتهٍح يتًرف ظِٔف ويَقم ب٘طٓاره ؾًذ شبٔؾ ادثال‪9‬‬
‫افقشؿ >‪ <h1‬هق وشؿ خاص بافًْاويـ أما افقشؿ >‪ <p‬ؾٓق خاص ب٘ضاؾة ؾَرة ٕص وظذ هذا‬
‫ؾًْدما يَقم ادتهٍح بَراءة افقشؿ >‪ <h1‬شٔيٓر حمتقاه ظذ أهنا ظْقان بْٔام ييٓر حمتقى افقشؿ‬
‫>‪<p‬ظذ أهنا ؾَرة ٕص وهُذا مع مجٔع افًْاس افتل شَْقم بدراشتٓا ٓحَا‪.‬‬

‫وجيدر اإلصارة إػ أن افقشقم هل ـِامت حمجقزة مسبَا مـ ؿبؾ ادزمج إول فٌِة ‪ xhtml‬وؽافبا‬
‫ما ترمز إػ احلرف إول مـ اشؿ افًْك بافٌِة اإلٕجِٔزية ؾّثال‪ 9‬افقشؿ ‪ p‬هق اختهار افُِّة‬
‫اإلٕجِٔزية ‪ paragraph‬وافتل تًْل ؾَرة ٕص‪.‬‬

‫يبدأ ـؾ وشؿ ب٘صارة أصٌر مـ < ئِٓا اشؿ افقشؿ وهق ‪ h1‬ذم مثافْا افسابؼ ومـ ثؿ إصارة أـز مـ‬
‫> ‪ ،‬ـام يع >‪: <h1‬‬

‫وفِقشقم ٕقظغ مها‪9‬‬

‫افقشقم ادزدوج‬

‫هل جمّقظة مـ افقشقم افتل تٖيت إثْان دائام‪ ،‬أحدمها فِدٓفة ظذ بداية افًْك (وشؿ افبداية أو‬
‫آؾتتاح) وأخر فِدٓفة ظذ هنايتف (وشؿ افْٓاية أو آؽالق) أما حمتقى افًْك ؾٔواف بْٔٓام ـام ذم‬
‫ادثال افتايل‪9‬‬

‫‪05‬‬
‫>‪ </p‬هذا حمتقى افًْك بغ وشّل افبداية و افْٓاية >‪<p‬‬

‫ـام هق مالحظ ذم هذا ادثال ؾ٘ن وشؿ بداية افًْك (<‪ )>p‬يبدأ ب٘صارة أـز مـ > ويْتٓل ب٘صارة‬
‫أصٌر مـ < ـام ذحْاه إٍٓا أما وشؿ هناية افًْك (<‪ )>p.‬ؾٔختِػ ظْف ظذ أنف يواف فف ذضة‬
‫(‪ ).‬بًد إصارة إصٌر مـ > فِدٓفة ظذ أنف وشؿ هناية افًْك‪-‬‬

‫افقشقم ادٍردة‬

‫هذا افْقع مـ افقشقم ظُس إول متاما حٔث تًتز ذاتٔة اإلؽالق ٓ حتتاج إػ وشؿ هناية إٓ أنْا‬
‫ٕؤػ ذضة ‪ .‬ؿبؾ إصارة إـز مـ < فِدٓفة ظذ أنف وشؿ ذايت اإلؽالق وادثال افتايل يبغ ذفؽ‪9‬‬
‫>‪<img /‬‬

‫‪ 1-1‬اخلهائص‬

‫تًرف اخلهائص ظذ أهنا جمّقظة متٌرات تواف إػ افقشقم فِتحُؿ ببًض افقطائػ داخؾ‬
‫افًْك‪ -‬وبًبارة أخرى ٕتحُؿ بًْك ما ظـ ضريؼ إضاؾة بًض اخلهائص داخؾ افقشؿ اخلاص‬
‫بتِؽ افًْك‪ ،‬واخلهائص مثِٓا مثؾ افقشقم هلا ـِامت حمجقزة‪ ،‬وبًض تِؽ اخلهائص ختتص‬
‫ظِّٓا ظذ بًض افقشقم فُـ مًيّٓا منسـة بغ افقشقم ادختٍِة‪ ،‬أي أنف يُّـ اضاؾة ٍٕس‬
‫اخلاصٔة ٕـثر مـ وشؿ‪-‬‬

‫مًيؿ افقشقم ادٍردة ٓ تَقم بًِّٓا إٓ بقاشىة بًض اخلهائص ما جيًؾ مـ تِؽ اخلهائص‬
‫رضورية وإجبارية أن تَسن مع تِؽ افقشقم افتل ٓ تًّؾ بدوهنا‪ ،‬فُـ ذم ٍٕس افقؿت تًد بًض‬
‫اخلهائص اختٔارية يَقم ادزمج باختٔار ما يريد إضاؾتف ظذ افقشقم وبحسب احلاجة وافرضورة‪.‬‬

‫فْٖخذ ظذ شبٔؾ ادثال افقشؿ ادٍردة إٔػ افذـر مع ؿِٔؾ مـ افتًديؾ‪9‬‬

‫>‪"/‬صقرة صًار ادقؿع"=‪<img src="images/logo.png" title‬‬

‫ٕستخدم هذا افقشؿ إلضاؾة صقرة ذم افهٍحة وذفؽ ظـ ضريؼ حتديد مسار افهقرة ظذ احلاشقب‬
‫وإضاؾتف ـَّٔة فِخاصٔة ‪ src‬وبدون هذه اخلاصٔة ٓ يُّـ مـ افقشؿ ‪ img‬أن يًّؾ وحده وبافتايل‬
‫ؾاخلاصٔة ‪ src‬تًد إجبارية بافْسبة فِقشؿ ‪ ،img‬وأن ٕٖيت فِخاصٔة ‪ title‬وهل فًْقٕة افهقرة وفق‬

‫‪06‬‬
‫تؿ آشتٌْاء ظْٓا ؾستيٓر افهقرة دون أي منُِة ما جيًؾ مـ هذه اخلاصٔة اختٔارية‪ ،‬تتقؿػ‬
‫إضاؾتٓا ظذ رؽبة ادهّؿ مادام ظدم اضاؾتٓا ٓ تٗثر ظذ طٓقر افهقرة‪-‬‬

‫تْبٔف‪ 9‬ؿقفْا أن هذه اخلاصٔة تًد اختٔارية ٓ تًْل أهنا دون ؾائدة ؾِق ـْا ٕريد حتسغ أرصٍة صقر‬
‫مقؿًْا مـ ؿبؾ حمرـات افبحث أمثال ؽقؽؾ وبْٔغ ظْدها يُقن هلذه اخلاصٔة أمهٔة ـزى‪-‬‬

‫ؿد يُقن مـ افهًب ظِٔؽ اشتًٔاب هذه افٍَرة فُـ ٓ بٖس ؾْٕ٘ا شْتحدث ظْٓا ذم افٍهقل افتافٔة‬
‫ـؾ ما ظِٔؽ مًرؾتف هق أن اخلاصٔة تنبف ""=‪ src‬إذ ‪ src‬هق اشؿ اخلاصٔة أما ‪ :‬ؾٓق إلظىاء ؿّٔة‬
‫فِخاصٔة وافتل تواف بغ ظالمتل تْهٔص وهق ذم ادثال افسابؼ مسار افهقرة ظذ احلاشقب‬
‫‪image/logo.jpg‬‬

‫وبادْاشبة ؾ٘ن اخلهائص ٓ تَتك ظذ افقشقم ادٍردة ؾحسب بؾ يُّـ فقشقم مزدوجة أن تٖخذ‬
‫خهائص حسب احلاجة وحْٔٓا يتؿ إضاؾة اخلهائص ذم وشؿ افبداية ؾَط أما وشؿ افْٓاية ؾٓق ثابت‬
‫ٓ يدخؾ ظِٔف رء‪-‬‬

‫‪ 1-2‬افهٌٔة ادًٔارية فهٍحة ‪html‬‬

‫أؿهد بافبْٔة ادًٔارية‪ ،‬اهلُٔؾ افًام افذي يبْك ظِٔف ـؾ صٍحة ويب وهق ظبارة ظـ جمّقظة مـ‬
‫افقشقم افتل تتحُؿ بافبْٔة ادًٔارية افًام فُؾ صٍحة ويب وٓ يُّـ ٕي صٍحة ويب اخلِق مْٓا‬
‫وإٓ اظتز ذفؽ خىٖ حسب ادً اير افَٔاشٔة افًادٔة‪ ،‬وإن ـان بًض ادتهٍحات ؿد يٍتح افهٍحة‬
‫بنُؾ جٔد ظذ افرؽؿ مـ وجقد تِؽ اخلىٖ‪ ،‬إٓ أن هْاك ظدد ٓ بٖس بف مـ ادتهٍحات ادنٓقرة‬
‫ؿد تٗدي خىٖ ذم افبْٔة ادًٔارية فِهٍحة إػ مناـؾ ذم صُؾ طٓقرها‪-‬‬

‫وظذ افًّقم تَْسؿ صٍحة افقيب حسب افبْٔة ادًٔارية إػ ؿسّغ أشاشٔغ مها‪ 9‬افرأس واجلسؿ‬
‫جيًّٓام افقشؿ افًام فهٍحة ويب ـام يع‪9‬‬
‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN‬‬
‫>"‪"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd‬‬
‫> "‪<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar‬‬
‫>‪<head‬‬
‫>‪ </title‬مرحبا بُؿ ذم مقؿًل اإلفُسوين ! >‪<title‬‬

‫‪07‬‬
 ‫;‪<meta http-equiv="Content-Type" content="text/html‬‬
‫>‪charset= windows-1256" /‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫هذه هل افًْاس أو بإحرى افقشقم إشاشٔة افتل يتنُؾ مْٓا افبْٔة ادًٔارية ٕي صٍحة ويب‬
‫وفِتبسٔط دظْا ًٕاود ـتابة هذه افسىقر مـ جديد فُـ هذه ادرة باظتبار افْسخة افَديّة فـ ‪ html‬ؿبؾ‬
‫تىقيره فٔهبح ‪-xhtml‬‬
‫>‪<html‬‬
‫>‪<head‬‬

‫>‪ </title‬مرحبا بُؿ ذم مقؿًل اإلفُسوين ! >‪<title‬‬

‫;‪<meta http-equiv="Content-Type" content="text/html‬‬

‫>‪charset= windows-1256" /‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ٕالحظ أن افبْٔة ادًٔارية متىابؼ بافْسبة فِْسختغ‪ ،‬ؾَط تؿ زيادة مجِة تًرئٍة ظذ افْسخة ‪xhtml‬‬
‫هق أول مجِة مـ ادثال إول‪9‬‬
‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN‬‬
‫>"‪"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd‬‬

‫وـذفؽ تؿ زيادة بًض اخلهائص ظذ افقشؿ ‪9 html‬‬

‫> "‪<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar‬‬

‫هذه هل افٍروق افًام افتل متٔز بْٔة افْسختغ أما ظـ أوامر افتحُؿ بادحتقى ؾبافتٖـٔد هْاك ظدد ٓ‬
‫بٖس بف مـ افٍروق فُْْا فـ ٕخقض ؾٔف بؾ شُْتٍل باحلديث ظـ أوامر ‪ xhtml‬إذ مًرؾة ‪xhtml‬‬
‫يَتيض مباذة مًرؾة‪html.‬‬

‫‪08‬‬
 ‫وأن فَِْل بافوقء ظذ افبْٔة ادًٔارية اخلاص بهٍحة ‪ xhtml‬وٕؼح إمقر افتافٔة‪9‬‬

‫‪ <!DOCTYPE‬هذا فٔس وشؿ ‪ xhtml‬حسب ادٍٓقم افذي ذحْاه شابَا وهق‬ ‫‪‬‬
‫افقحٔد افذي خيافػ افَقاظد إٓػ افذـر‪ -‬تستخدم هذه اجلِّة فتحديد ٕقظٔة وثَٔة‬
‫افهٍحة* مع بٔان افْسخة ادستخدمة فبْاء صٍحة افقيب وذم حافتْا هذه هق افْسخة رؿؿ‬
‫‪.0./‬‬

‫>‪ <html‬هذا هق افقشؿ إشاد افذي حئط بُامؾ صٍحة افقيب هلذا ‪ ,‬ـام تالحظ‬ ‫‪‬‬
‫‪ٌَِٕ ٓ ,‬ف إٓ آخر افهٍحة بحٔث ٓ يقجد أي صٔ بًد وشؿ اإلؽالق >‪ </html‬وهلذا‬
‫افقشؿ خاصٔتغ يتؿ إضاؾتٓام داخؾ وشؿ افبداية ومها‪:‬‬
‫‪ٕ xmlns‬ؤػ هذه اخلاصٔة ظذ افقشؿ ‪ html‬فبٔان مقؿع اهلٔئة افتل‬ ‫‪o‬‬
‫ختتص بتىقير فٌة ‪xhtml‬‬
‫‪ xml:lang‬أما هذه اخلاصٔة ؾٓل خاصة بذـر افٌِة افتل شُْتب هبا‬ ‫‪o‬‬
‫ٕهقصْا وهل ذم مثافْا ‪ ar‬أي ظريب ‪ Arabic‬وذم حال ـان ادقؿع بافٌِة‬
‫اإلُِٕٔزية ُٕتب ‪ en‬أو بافٍرٕسٔة ‪ fr‬حٔث ٕرمز فٌِة بٖول حرؾغ مـ اشّف‬
‫حسب افٍِظ اإلُِٕٔزي‬
‫>‪ <head‬هذا وشؿ رأس افهٍحة حٔث حيتقي ظذ جمّقع مـ إوامر افتل هتدف‬ ‫‪‬‬
‫إػ افتحُؿ بادقؿع فُْٓا ٓ تيٓر أبدا مع حمتقى افهٍحة ويتؿ إؽالؿٓا بقشؿ اإلؽالق‬
‫>‪</head‬ؾقر إٓتٓاء مـ وضع تِؽ إوامر وأهؿ تِؽ إوامر هل‪:‬‬
‫>‪ <title‬وشؿ ظْقان افهٍحة افتل تيٓر ظذ افؼيط ـام ذم افنُؾ‬ ‫‪o‬‬
‫افتايل‪9‬‬

‫‪1/‬‬
 ‫افنُؾ ‪0-1‬‬

‫ؾُرة‪ 9‬مـ افرضوري جد ا حتديد هذا افًْقان إذا أردٕا إتنار مقؿًْا ظذ حمرـات افبحث‪ ،‬ؾًْد‬
‫افبحث ظـ أي مقؿع ظذ أحد حمرـات افبحث وفتُـ مثال جقجؾ مثال (‪ )google.com‬ؾافًْقان‬
‫تساظد بنُؾ ـبر ظذ إجياد حمرك افبحث دقؿًْا وإطٓارها مع افْتائج إوػ ـام أن افًْقان ييٓر ذم‬
‫ٕتائج افبحث ـًْقان فِرابىة ـام يبْٔٓا افنُؾ افتايل‪9‬‬

‫افنُؾ ‪ 91-1‬طٓقر افًْقان ذم جقجؾ ظْد افبحث ظـ مقؿع افَّرية‬

‫‪10‬‬
‫>‪ <meta‬هْاك افُثر مـ ٕقع هذه افقشقم افذي تبدأ بـ ‪ meta‬فُْٓا فٔست صديدة إمهٔة هلذا‬
‫شْتحدث ظْٓا ٓحَا ـؾ ما ظِٔؽ مًرؾتف أن هق ما وضًْاه ذم هذا ادثال إذ هق افقحٔد افرضوري‬
‫جدا حٔث يتحُؿ بام يسّك افنٍٔرة ادقحدة )‪ (Unicode‬وهل جمّقظة رمقز تستخدم فتّثٔؾ‬
‫افرمقز واحلروف افتل تتُقن مْٓا مًيؿ فٌات افًامل وبافْسبة فٌِة افًربٔة ٕستًّؾ‪windows-‬‬
‫‪1256 .‬‬

‫مالحية مًيؿ ادهّّغ يىَِقن ظذ افنٍٔرة ادقحدة باشؿ افسمٔز فذا أرجقا أن ٓ تتٍاجٖ إذا‬
‫شًّت أحدا يذـرها هبذا آشؿ‪ ،‬وٓبد أن تًِؿ أجوا أن اشتًامل افسمٔز اخلاص بافٌِة افًربٔة ٓ‬
‫يًْل ظدم امُإٔة ـتابة ٕهقص أجْبٔة‪ ،‬إذ ؾَط بًض احلروف اخلاصة هل افتل فـ تيٓر ـإحرف‬
‫افٍرٕسٔة ‪-é à ê‬‬

‫وأخرا بًد إؽالق رأس افهٍحة >‪ٖٕ </head‬يت فِقشؿ >‪ <body‬افذي ينُؾ‬ ‫‪‬‬
‫اجلسؿ وؿِب صٍحة افقيب‪ %88 ،‬مـ افًّؾ يتؿ بغ <‪ >body‬و <‪ >.body‬وأي‬
‫رء ٕريده أن ييٓر ـّحتقى يتؿ ـتابتف بغ هاتغ افقشّتغ‪-‬‬
‫وذم افْٓاية ٓ تْسك أنف مـ افقاجب إؽالق <‪ >/html‬حتك ٕخز ادتهٍح أن صٍحتْا ؿد إتٓت‪-‬‬

‫‪ 1-3‬افتًَِٔات وادالحيات‬

‫أحٔإا وأنت تُتب أوامر صٍحتؽ ؾَد ترؽب ذم وضع بًض افتًَِٔات فؼح شبب وضع أمر ما ذم‬
‫مُان ما‪ ،‬حتك ٓ تتًب ظْد مراجًة ادهدر فِتًديؾ‪ ،‬أو حتك وأنت تُتب أوامر صٍحتؽ ؿد‬
‫يراودك ؾُرة تريد تىبَٔٓا ذم مقؿًؽ‪ ،‬ؾحتك ٓ تْسك تِؽ افٍُرة يُّْؽ أن تٖخذ ؿِؿ وتُتبٓا فُـ‬
‫شٍُِٔؽ ذفؽ بًض افقؿت ٓشٔام أن وؿت ادهّؿ دائام حمدود‪ ،‬وفِتخِص مـ تِؽ ادنُِة ؾ٘ن‬
‫‪xhtml‬يقؾر أشِقب شِٓة إلضاؾة تًَِٔات فـ تيٓر فِزائر ظْد ؾتح ادقؿع ظذ ادتهٍح وإٕام‬
‫شتيٓر فِّهّؿ داخؾ ادهدر‪.‬‬

‫إلضاؾة تًِٔؼ ًّٕؾ ـام يع‪9‬‬

‫>‪ --‬هْا َٕقم بُتابة افتًِٔؼ ويُّـ أن تُقن أـثر مـ شىر‪<!--‬‬

‫‪11‬‬
 ‫مًاجلة افْهقص‬ ‫‪2‬‬

‫‪ 2-0‬افًْاويـ‬

‫بافىبع مع ـؾ ٕهقصْا افتل شْؤٍٓا دحتقى افهٍحة ؾْٕ٘ا شْحتاج دائام إػ اشتخدام ظْاويـ‬
‫شٔختِػ ـؾ ظْقان حسب مُإتف مـ افْص ؾتارة ؿد يُقن ظْقان أشاد فُامؾ افْص وأحٔإا‬
‫ظْقان دجّقظة ؾَرات أو حتك ظْقان فٍَرة بحد ذاتف‪-‬‬

‫يتقؾر ذم فٌة ‪ xhtml‬جمّقظة مـ افًْاويـ تتّثؾ ذم ‪ 5‬مستقيات تْدرج ـِٓا ضّـ وشؿ افًْقان‬
‫ادسّك ‪ h‬افتل تَسن ب٘حدى إرؿام مـ ‪ 0‬إػ ‪ 5‬حسب رؽبة ادهّؿ وختتِػ هذه افًْاويـ ذم‬
‫أحجامٓا بدء مـ إـز حجام ‪ h1‬هبقضا إػ إصٌر ‪ h6‬ـام هق ذم ادثال افتايل‪9‬‬
‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN‬‬
‫>"‪"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd‬‬
‫> "‪<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar‬‬
‫>‪<head‬‬
‫>‪ ! </title‬مرحبا بُؿ ذم مقؿًل اإلفُسوين >‪<title‬‬

‫;‪<meta http-equiv="Content-Type" content="text/html‬‬

‫>‪charset=windows-1256" /‬‬
‫>‪</head‬‬
‫>‪<body‬‬

‫>‪ </h1‬هذا افًْقان ‪<h1> 1‬‬

‫>‪ </h2‬هذا افًْقان ‪<h2> 2‬‬

‫>‪ </h3‬هذا افًْقان ‪<h3> 3‬‬

‫>‪ </h4‬هذا افًْقان ‪<h4> 4‬‬

‫>‪ </h5‬هذا افًْقان ‪<h5> 5‬‬

‫>‪ </h6‬هذا افًْقان ‪<h6> 6‬‬

‫>‪</body‬‬
‫>‪</html‬‬

‫‪12‬‬
 ‫ٕتٔجة هذا ادثال ظذ ادتهٍح‪9‬‬

‫افنُؾ ‪ٕ 90-2‬تٔجة وشقم افًْاويـ مـ ‪ h1‬إػ ‪h6‬‬

‫‪ 2-1‬افٍَرات‬

‫يستحقذ ؾَرات افْهقص ظذ مًيؿ حمتقى ادقؿع فذا ؾٓق أهؿ ظْك ظْد تهّٔؿ صٍحة ويب‪،‬‬
‫وإلضاؾة ٕص ٕستخدم افقشؿ ‪ p‬افذي يًْل ؾَرة بافٌِة اإلُِٕٔزية ‪ paragraph‬وًٍٕؾ ذفؽ ـام‬
‫يع‪9‬‬

‫>‪ٕ </p‬ص افٍَرة يُقن بافداخؾ >‪<p‬‬

‫وشؿ آؾتتاح >‪ <p‬يدل ظذ بداية افٍَرة‪-‬‬ ‫‪‬‬

‫ووشؿ اإلؽالق >‪ </p‬يدل ظؾ هناية افٍَرة‪-‬‬ ‫‪‬‬

‫مثال‪9‬‬
‫>‪<body‬‬

‫‪13‬‬
 ‫جامًة افدول افًربٔة هل مْيّة توؿ دوًٓ ذم افؼق إوشط وأؾرئَا ويًتز أظواؤها >‪<p‬‬

‫>‪.</p‬دوًٓ ظربٔة‬
‫>‪</body‬‬

‫افنُؾ ‪ٕ 91-2‬تٔجة إضاؾة ؾَرة ٕص‬

‫إضاؾة أـثر مـ ؾَرة‪9‬‬

‫بافىبع شتحتاج ذم مقؿًؽ إػ أـثر مـ ؾَرة واحدة فُـ ٓ تَِؼ إلضاؾة ؾَرة جديدة ٕستخدم ٍٕس‬
‫افقشؿ افسابؼ بٍْس إشِقب افسابؼ متاما ؾَط ٕخر افْص وٕوع افْص اجلديد وٓصؽ أنْا ٕوع‬
‫افٍَرا ت حتت بًوٓا افبًض حٔث افٍَرة إول تيٓر أوٓ ثؿ افتل تِٔٓا ثؿ افتل تِٔٓا وهُذا‬
‫يُّْؽ إضاؾة ؾَرات إػ ما ٓهناية‪-‬‬
‫>‪<body‬‬

‫>‪ </p‬افٍَرة إوػ‪<p> ---‬‬

‫>‪ </p‬افٍَرة افثإٔة‪<p> ---‬‬

‫>‪ </p‬افٍَرة افثافثة‪<p> ---‬‬

‫>‪</body‬‬

‫إذا ؿّت بتجربة ادثال افسابؼ ظذ ادتهٍح ؾٕ٘ؽ شتالحظ وجقد مساحة ؾارؽة بَدر افسىر بغ ـؾ‬
‫ؾَرتغ‪ -‬ذاك شىر ؾارغ يتؿ إضاؾتٓا تَِائٔا فِتّٔز بغ افٍَرات فُـ جيب إٓتباه إذ رسظان ما ئّؾ‬
‫بًض إصخاص إػ اشتخدام ؾَرتـ ؾَط دجرد أهنؿ يريدون إٓتَال إػ افسىر افتايل وهذا خىٖ‬
‫جدا وفتجْب ذفؽ ما ظِٔؽ شقى مقاصِة افَراءة‪-‬‬

‫‪14‬‬
 ‫اإلٕتَال إػ أول افسىر‬

‫فًِؽ شبَت واشتخدمت برٕامج افقورد أو أي حمرر ٕهقص آخر‪ ،‬ؾًْدما ٕوٌط ظذ زر اإلدخال‬
‫‪ enter‬ؾ٘ن افْص يْتَؾ مباذة إػ أول افسىر افذي ئِف شقاء ـّؾ افسىر افسابؼ أم ٓ‪ ،‬أما ذم‬
‫تهّٔؿ صٍحات افقيب ؾ٘ن إمر ٓ يتؿ هبذا افْحق ؾٍل ادثال افتايل‪9‬‬
‫>‪<body‬‬

‫ادَر افدائؿ جلامًة افدول افًربٔة يَع ذم افَاهرة‪ ،‬ظاصّة مك >‪<p‬‬

‫أما ذم افسابؼ ؾُان ذم تقٕس مـ ‪ 1979‬إػ ‪1991‬‬

‫>‪</p‬‬
‫>‪</body‬‬

‫ٕرى جٔدا ذم هذا ادثال أن افْص ييٓر ذم شىريـ اثْغ فُـ ظْد افتىبٔؼ ظذ ادتهٍح ؾٕ٘ف فـ ييٓر‬
‫هبذا افنُؾ وإٕام شٔيٓر مجِة ـامِة ذم شىر واحد وفـ يْتَؾ إػ افسىر افتايل إٓ بًد امتالء ظرض‬
‫حجؿ افناصة‪-‬‬

‫يبدو أن ادنُِة ؿد اتوح ؾام احلؾ إذا؟‬

‫احلؾ ذم ؽاية افبساضة ؾـ ‪ xhtml‬تقؾر فْا وشؿ صٌر ذايت اإلؽالق وطٍٔتف هق إٓتَال بافْص إػ أول‬
‫افسىر‪ 9‬وهق <‪ >. br‬وتنر » ‪ « br‬إػ أول حرؾغ ذم افُِّة اإلُِٕٔزية » ‪ « break‬افتل تًْل‬
‫بافٌِة افًربٔة » افَىع « أي اؿىع افسىر احلايل وابدأ افُتابة ذم شىر جديد حتتف مباذة‪ ،‬ويُقن‬
‫اشتخدامف ـام يع‪-‬‬
‫>‪<body‬‬

‫>‪ <br /‬ادَر افدائؿ جلامًة افدول افًربٔة يَع ذم افَاهرة‪ ،‬ظاصّة مك >‪<p‬‬ ‫أما ذم افسابؼ‬
‫ؾُان ذم تقٕس مـ ‪ 1979‬إػ ‪1991‬‬
‫>‪</p‬‬
‫>‪</body‬‬

‫ظْد دمربة هذا ادثال ظذ ادتهٍح ؾسٔبدأ افْص مـ افسىر إول فُـ ما أن يهؾ إػ افقشؿ >‪<br /‬‬
‫حتك يْتَؾ مباذة فِيٓقر أول افسىر افثاين دون مراظاة مساحة افسىر افذي يسبؼ افقشؿ >‪-<br /‬‬

‫‪15‬‬
‫مالحية‪ 9‬يُّـ اشتخدام أـثر مـ وشؿ <‪ >. br‬ذم افٍَرة افقاحدة ـام يُّـ وضع أـثر مـ وشؿ‬
‫>‪ <br /‬أمام بًوٓا افبًض فالٕتَال ظدة شىقر حتت افْص حٔث يّثؾ ـؾ وشؿ >‪ <br /‬إتَال‬
‫شىر واحد ـام هق مبغ ذم ادثال افتايل‪-‬‬

‫>‪<body‬‬

‫>‪<h2‬‬ ‫>‪ </h2‬مـ وطائػ اجلامًة افًربٔة‬

‫‪ <br‬تسٓؾ اجلامًة افًربٔة إجراء برامج شٔاشٔة واؿتهادية وثَاؾٔة وظِّٔة واجتامظٔة >‪<p‬‬
‫ٍ‬
‫‪<br‬فتّْٔة مهافح افًامل افًريب مـ خالل مٗشسات مثؾ مٗشسة جامًة افدول افًربٔة فِسبٔة >‪/‬‬

‫‪ .‬وافثَاؾة وافًِقم (أخٔسُق) وجمِس افقحدة آؿتهادية افًربٔة>‪/‬‬

‫>‪</p‬‬

‫مْتدى فتْسٔؼ ادقاؿػ افسٔاشٔة فِدول إظواء>‪<p‬‬

‫ً‬ ‫>‪<br /‬وؿد ـإت اجلامًة افًربٔة بّثابة‬
‫واحلد >‪<br /‬وفِتداول ومْاؿنة ادسائؾ افتل تثر اهلؿ ادنسك وفتسقية بًض ادْازظات افًربٔة‬
‫ـام مثِت اجلامًة مْه ًة فهٔاؽة وإبرام >‪. <br /‬مـ ساظاهتا‪ ،‬ـكاع أزمة فبْان ظام ‪1958‬‬
‫آؿتهادي بغ بِدان اجلامًة‪ -‬أحد أمثِة هذه >‪ <br /‬افًديد مـ افقثائؼ افتارخئة فتًزيز افتُامؾ‬
‫آؿتهادي افًريب ادنسك‪ ،‬وافتل حتدد مبادئ إننىة >‪ <br /‬افقثائؼ ادّٓة وثَٔة افًّؾ‬
‫‪.‬آؿتهادية ذم ادْىَة‬
‫>‪</p‬‬
‫>‪</body‬‬

‫‪16‬‬
 ‫افنُؾ ‪ٕ 92-2‬تٔجة إٓتَال إػ افسىر باشتخدام افقشؿ ‪br‬‬

‫‪ 2-1-0‬تْسٔؼ افْهقص‬

‫مجٔؾ جدا ما ظِّْاه مع افْهقص حتك أن‪ ،‬فُـ إمجؾ مـ ذفؽ ؿدرتْا ظذ افتحُؿ بنُؾ طٓقر‬
‫بًض افُِامت ضّـ تِؽ افْهقص ؾٍل ‪ xhtml‬هْاك جمّقع ٓ بٖس هبا مـ افقشقم متُْْا مـ‬
‫افتحُؿ ببًض افُِامت افرئٔسٔة أو اجلّؾ ادتّٔزة ٕقظا ما ظـ باؿل افْهقص‪ ،‬وشٖحاول أن أرسدها‬
‫بنُؾ رسيع ومٍٓؿ حٔث أذـر افقشؿ ووطٍٔتف ومثال ظِٔف‪-‬‬

‫>‪ٕ <em> </em‬ستخدم هذا افقشؿ داخؾ افٍَرات حلك ـِّة ما أو جمّقظة ـِامت‬ ‫‪‬‬
‫جلًِٓا مائال حٔث ييٓر ـؾ ما هق متقاجد بغ >‪ <em‬و >‪ </em‬بنُؾ اخلط احائؾ‬
‫ـام ذم ادثال افتايل‪.‬‬
‫>‪<body‬‬

‫>‪ <em‬آمغ افًام جلامًة افدول افًربٔة هق افسٔد>‪<p‬‬ ‫مـ مجٓقرية مك >‪ٕ </em‬بٔؾ افًريب‬
‫>‪</p‬افًربٔة‬
‫>‪</body‬‬

‫شُٔقن ٕتٔجة طٓقر آشؿ « ٕبٔؾ افًريب ش باخلط احائؾ‪-‬‬

‫‪17‬‬
‫<‪ >strong> </strong‬وطٍٔة هذا افقشؿ هق جًؾ أي ٕص داخِٓا ييٓر بإشقد‬ ‫‪‬‬
‫افًريض وٕستخدمٓا متاما ـافقشؿ افسابؼ‪ ،‬ؾِق بدفْا مُان ‪ em‬ووضًْا ‪ strong‬فُان‬
‫ٕتٔجة طٓقر آشؿ « ٕبٔؾ افًريب ش بإشقد افًريض‪-‬‬

‫مالحية‪ 9‬مـ ادُّـ اشتخدام افقشّغ مًا ؾتُقن افْتٔجة طٓقر آشؿ « ٕبٔؾ افًريب ش بإشقد‬
‫ا فًريض احائؾ‪ ،‬فُـ فًٍؾ هذا جيب إٓتباه إػ ظدم تداخؾ افقشقم بْٔٓا ؾٌِْؼ افقشؿ افثاين ؿبؾ‬
‫إول ـام يع‪9‬‬

‫>‪<em> <strong‬‬ ‫ـتابة صحٔحة فًدم تداخؾ افقشقم >‪ </strong> </em‬افْص‬

‫>‪<strong> <em‬‬ ‫أجوا ـتابة صحٔحة فًدم تداخؾ >‪ </em> </strong‬افْص‬
‫افقشقم‬

‫>‪<em‬‬ ‫>‪<strong‬‬ ‫خىٖ بسبب تداخؾ افقشقم ؾٔام بْٔٓا >‪ </em> </strong‬افْص‬

‫>‪ٕ <sup> </sup‬ستخدم هذا افقشؿ فقضع افْص ؾقق ـام ذم آختهار (‪ )th‬افذي‬ ‫‪‬‬
‫يقضع ؾقق افتاريخ اإلُِٕٔزي وادثال افتايل يقضح ذفؽ‪-‬‬

‫>‪<body‬‬
‫‪<p> The Arab League was founded in Cairo in the 22^{th‬‬
‫>‪} of March 1945. </p‬‬
‫>‪</body‬‬

‫شُٔقن ٕتٔجة طٓقر ‪ th‬ـام يع‪9‬‬

‫‪The Arab League was founded in Cairo in the 22th of March 1945.‬‬

‫>‪ <sub> </sub‬هذا ٕير افقشؿ افسابؼ حٔث يقضع افْص حتت افسىر ـام ذم‬ ‫‪‬‬
‫افًِّٔات افرياضٔة وادثال افتايل يقضح ذفؽ‪-‬‬
‫>‪<body‬‬
‫>‪<p> x_n + x_{n - 1} - 2x<sub>n-2</sub‬‬
‫>‪</p‬‬
‫>‪</body‬‬

‫افْتٔجة‪9‬‬

‫‪18‬‬
‫‪xn + xn-1 – 2xn-2‬‬

‫بافىبع أطْؽ اشتْتجت امُإٔة مزج هاتغ افقشّتغ فُتابة رء مثؾ هذا‪9‬‬

‫‪xn + yk-n‬‬

‫‪ 2-1-1‬آؿتباشات وآختهارات‬

‫آؿتباشات‪9‬‬ ‫‪‬‬

‫هْاك ٕقظان مـ آؿتباشات إما أن يُقن اؿتباشا جلِّة صٌرة داخؾ ؾَرة ظْدها ٕستخدم افقشؿ‬
‫<‪ >q> </q‬أو أن يُقن اؿتباشا فٍَرة ـامِة ظْدها ٕستخدم افقشؿ < >‪blockquote‬‬
‫‪ ></blockquote‬وافٍرق بْٔٓام هل أنف ذم احلال إول أي ظْد آؿتباس افهٌر ؾ٘ن وشؿ‬
‫آؿتباس ‪ q‬يًتز وشؿ داخع وبافتايل يقضع داخؾ وشؿ ؾَرة (‪ )p‬اجبارا أما ذم احلافة افثإٔة أي حافة‬
‫اؿتباس ؾَرة ـامِة ؾقشؿ افٍَرة (‪ )p‬هق افذي يقضع داخؾ وشؿ آؿتباس ‪ blockquote‬وادثآن‬
‫افتافٔان يقضحان ذفؽ‪9‬‬

‫مثال آؿتباس افهٌر‪9‬‬

‫>‪<body‬‬

‫ٓ متؾ مـ دمربة هذه افدروس ؾَد ؿٔؾ >‪<p‬‬

‫>‪<q‬‬ ‫ؾاصز وشتْال مرادك >‪ </q‬أظيؿ افْجاحات تٖيت بًد أصد افًثرات‬
‫>‪</p‬‬
‫>‪</body‬‬

‫شٔيٓر مجِة‪" 9‬أظيؿ افْجاحات تٖيت بًد أصد افًثرات" بغ ظالمتل تْهٔص ـْتٔجة فِقشؿ‬
‫>‪-<q></q‬‬

‫مثال آؿتباس افُبر‪9‬‬

‫>‪<body‬‬
‫>‪<blockquote‬‬

‫‪2/‬‬
 ‫ٓ متؾ مـ دمربة هذه افدروس ؾَد ؿٔؾ أظيؿ افْجاحات تٖيت بًد أصد افًثرات ؾاصز >‪<p‬‬

‫>‪</p‬وشتْال مرادك‬
‫>‪</blockquote‬‬
‫>‪</body‬‬

‫شتُقن ٕتٔجة هذا ادثال ـٖي ؾَرة ظادية ؾَط ذم حال آؿتباس افُبر يتؿ إزاحة افْص بَدر ‪1/‬‬
‫بُسؾ حسب ادماه افْص ؾِق ـان ادماه افْص مـ افٔسار إػ افّٔغ يتؿ إزاحة افْص إػ افّٔغ‬
‫وافًُس بافًُس‪ ،‬إذا ـان ادماه افْص مـ افّٔغ إػ افٔسار يُقن آزاحة إػ افٔسار‪-‬‬

‫آختهارات‬ ‫‪‬‬

‫ؿد يرد بًض افًبارات و افُِامت أحٔإا خمتكة ذم ٕهقصْا‪ ،‬وؿد ٓ تُقن مٍٓقمة فِقهِة إوػ‬
‫بافْسبة فِزائر وبافتايل يتحتؿ ظِْٔا ذحٓا‪ -‬أذـر ظذ شبٔؾ ادثال افُِّة افزبرية ‪ xhtml‬ؾَد ٓ‬
‫يًرف ذحية ـبرة مـ ادجتّع ما تًْٔف تِؽ احلروف ادختكة وبافتايل ٓبد مـ ذحٓا فُـ بدٓ‬
‫مـ وضًٓا بغ ؿقشغ ـام ذم ٕهقص افُتب‪ ،‬شْؼحٓا دون أن ٕجًّٓا مع ٕهْا وذفؽ باشتخدام‬
‫افقشؿ <‪ >acronym> </acronym‬حٔث ٕوع افُِّة ادختكة بافداخؾ ثؿ ٕؤػ فٍْس‬
‫افقشؿ اخلاصٔة ادسّك ‪ title‬افتل تٖخذ افؼح اخلاص بآختهار ـَّٔة هلا‪ -‬وفـ ييٓر افؼح إٓ‬
‫ظْدما يوع افزائر افٍٖرة ؾقق آختهار ـام ذم ادثال افتايل‪9‬‬

‫>‪<body‬‬

‫إن >‪<p‬‬

‫>"‪<acronym title="eXtensible HyperText Markup Language‬‬

‫>‪XHTML </acronym‬‬ ‫‪.‬هق افٌِة ادستخدمة ذم تهّٔؿ ادقاؿع‬
‫>‪</p‬‬
‫>‪</body‬‬

‫‪20‬‬
 ‫افنُؾ ‪3-2‬‬

‫ٕناهد ذم هذا افنُؾ أن افْص ييٓر ـٖي ٕص ظادي فُـ ظْد وضع ادٗذ ؾقق ـِّة ‪xhtml‬‬
‫ييٓر مربع صٌر حيتقي ظذ ذح افُِّة؛ " ‪eXtensible HyperText Markup‬‬
‫‪"Language‬‬

‫مالحية‪ 9‬بًض ادتهٍحات مثؾ ؾرؾُس وأوبرا ؾٕ٘ف توع خط حتت آختهار تَِائٔا فِدٓفة ظذ‬
‫وجقد ذح مَسن بآختهار أما ادتهٍحات إخرى ؾال تًٍؾ ذفؽ فُـ مع هذا ؾافؼح ييٓر‬
‫ظْد وضع افٍٖرة ؾقق افُِّة‪-‬‬

‫‪ 2-2‬افَقائؿ جٓة ‪xhtml‬‬

‫تًتز افَقائؿ م ـ افًْاس إـثر أمهٔة ذم ظِّٔة تهّٔؿ وبْاء مقاؿع افقيب ؾبقاشىتٓا يتؿ إٕناء ؿائّة‬
‫افروابط افتل تسّح فِزائر إٓتَال بغ صٍحات ادقؿع ؾوال أهنا ؾًال جدا ظْد إٕناء تَسٔامت‬
‫داخؾ افهٍحة ذاهتا فذا مـ افرضوري أن يتَـ ادهّؿ افتالظب بافَقائؿ‪-‬‬

‫وبادْاشبة فٔست افَقائؿ إٓ ـّثِف مـ افًْاس ذم بساضة ؾّٓف وربام هق أشٓؾ وٓ أظْل هبذا أن‬
‫تتساهؾ وتَرأها ؿراءة شىحٔة بؾ هذا تنجٔع فزيادة إٓتباه‪ ،‬وذم ـؾ إحقال هْاك ثالثة أنقاع مـ‬
‫افَقائؿ شْتحدث ظْٓا حسب افتسِسؾ ‪9‬ؿائّة ؽر مْيّة ثؿ ؿائّة مْيّة (مرؿّة) وأخرا ؿائّة‬
‫تًرئٍة‪-‬‬

‫‪21‬‬
 ‫‪ 2-2-0‬ؿائّة ؽر مْيّة‬

‫هل ؿائّة ظادية ٓ يقجد بغ ظْاسها أي أمهٔة ذم افستٔب‪ -‬يبدأ ـؾ ظْك بَْىة شقداء بنُؾ‬
‫اؾسايض ما مل يتؿ اشتبداهلا بّربع أو دائرة أو رء آخر ـام شْرى ذفؽ ذم ؿسؿ افتْسٔؼ بٌِة ‪-CSS‬‬

‫تنبف افَائّة افٌر مْيّة ما يع‪:‬‬

‫‪ ‬مجٓقرية افَّر ادتحدة‬

‫‪ ‬ادُِّة افًربٔة افسًقدية‬

‫‪ ‬اجلّٓقرية افًربٔة افسقرية‬

‫إن ترتٔب افًْاس ذم هذه افَائّة فٔس فف أي دٓفة ـام ٓ أؾؤِة فًْك ظذ آخر ؾبدء افَائّة بـ »‬
‫مجٓقرية افَّر ادتحدة « ٓ تًْل أي شابَٔة ظذ » ادُِّة افًربٔة افسًقدية « أو » اجلّٓقرية افًربٔة‬
‫افسقرية « ‪-‬‬

‫إلٕناء ؿائّة ٕستخدم افقشؿ ادزدوج <‪ ،>ul< </ul‬أما إلضاؾة ظْك داخؾ افَائّة ؾْستخدم‬
‫ـذفؽ افقشؿ ادزدوج <‪ >li< >.li‬حٔث يُقن حمتقى افًْك بغ وشّل آؾتتاح ) <‪( >li‬‬
‫واإلؽالق ) <‪ - ( >.li‬وـِام أردٕا إضاؾة ظْك آخر ذم ٍٕس افَائّة ؿّْا بتُرار ٍٕس افًِّٔة مع‬
‫افتٖـد بقجقد ـامؾ ظْاس حمتقى افَائّة داخؾ وشّل تًريػ افَائّة <‪ >ul></ul‬إذ‪9‬‬

‫‪ 9<ul></ul> ‬يًّؾ ظذ افتًريػ فِّتهٍح أنْا ظذ وصؽ إضاؾة ؿائّة ؽر مْيّة‪-‬‬

‫‪ ‬بْٔام <‪ 9> li></li‬يًّؾ ظذ افتًريػ بافًْاس افتل تنُؾ حمتقى افَائّة ـام يبْٔف ادثال‬
‫افتايل‪9‬‬
‫>‪<ul‬‬

‫>‪</li‬مجٓقرية افَّر ادتحدة>‪<li‬‬

‫>‪</li‬ادُِّة افًربٔة افسًقدية>‪<li‬‬

‫>‪</li‬اجلّٓقرية افًربٔة افسقرية>‪<li‬‬

‫>‪</ul‬‬

‫شُٔقن ٕتٔجة هذا ادثال ؿائّة ظادية تبدأ ـؾ ظْك ذم افَائّة بَْىة شقداء‪-‬‬

‫‪22‬‬
 ‫إٕناء ؿقائؿ متداخِة‬

‫ادَهقد بافَقائؿ ادتداخِة هق إناء ؿائّة ؾرظٔة مـ خالل ظْك ضّـ افَائّة افرئٔسٔة ـام يبْٔٓا‬
‫ادثال افتايل‪9‬‬

‫‪ ‬أشباب افربٔع افًريب‬

‫افَّع وآشتبداد‬ ‫‪o‬‬

‫إتحار افبقظزيزي‬ ‫‪o‬‬

‫‪ ‬افثقرات افْاجحة‬

‫‪ ‬آحتجاجات افًارمة‬

‫إلٕناء ؿائّة ؾرظٔة داخؾ ؿائّة رئٔسٔة يتؿ إضاؾة افَائّة افٍرظٔة بافُامؾ ـام فق أهنا ؿائّة رئٔسٔة‬
‫داخؾ ظْك افَائّة افرئٔسٔة افتل ٕريد أن ٕوع هلا ظْاس افَائّة افٍرظٔة ـّتٍرظات مْف ؾِق أن فديْا‬
‫ظْك ما ذم ؿائ ـ ـ ـ ـ ـ ــّة وفت ـ ــُـ ‪>.li< 9‬أشباب افربٔع افًريب<‪ >li‬وأردٕا أن ٕؤػ فف متٍرظات‬
‫ؾسْوع ؿائّة بافُامؾ <‪ >ul><li></li></ul‬داخؾ <‪ >li></li‬ـام ذم ادثال افتايل‪9‬‬
‫>‪<ul‬‬

‫أشباب افربٔع افًريب >‪<li‬‬

‫>‪<ul‬‬

‫>‪</li‬افَّع وآشتبداد>‪<li‬‬

‫>‪</li‬إتحار افبقظزيزي>‪<li‬‬

‫>‪</ul‬‬
‫>‪</li‬‬

‫>‪</li‬افثقرات افْاجحة>‪<li‬‬

‫>‪</li‬آحتجاجات افًارمة>‪<li‬‬

‫>‪</ul‬‬

‫‪23‬‬
 ‫‪ 2-2-1‬ؿائّة مرؿّة‬

‫هذا ظُس افَائّة افسابَة حٔث افستٔب هْا فف أمهٔتف فذا تُقن ظْاس افَائّة مرؿّة ؾافًْك إول‬
‫تًّدٕا أن يُقن هق إول وإخر ـذفؽ تًّدٕا أن يُقن هق إخر‪-‬‬

‫يتؿ إٕناء ؿائّة مرؿّة بٍْس أشِقب افَائّة افٌر مْيّة مع اشتبدال » ‪ « ul‬بـ » ‪ « ol‬ذم ـال وشّل‬
‫افتًريػ بافَائّة‪ ،‬إذ » ‪« ul‬هل اختهار اجلِّة إٓجِٔزية » ‪ « unordored list‬أي (ؿائّة ؽر‬
‫مْيّة) أما » ‪ « ol‬ؾٓل اختهار ـِّة » ‪ « ordored list‬أي (ؿائّة مْيّة)‪-‬‬

‫مثال‪9‬‬
‫>‪<ol‬‬

‫>‪</li‬مجٓقرية افَّر ادتحدة>‪<li‬‬

‫>‪</li‬ادُِّة افًربٔة افسًقدية>‪<li‬‬

‫>‪</li‬اجلّٓقرية افًربٔة افسقرية>‪<li‬‬

‫>‪</ol‬‬

‫ختتِػ ٕتٔجة هذه افَائّة ظـ شابَٓا ذم ـقن افًْاس ٓ تبدأ بَْىة شقداء بؾ تُقن مرؿّة ترؿٔام‬
‫تهاظديا‪-‬‬

‫‪ 2-2-2‬ؿائّة تًرئٍة‬

‫مـ افًْقان يتبغ فْا أن هدف هذه افَقائؿ هل افتًريػ بقء ما ؾِق أنْا ِّٕؽ ؿائّة بادْيامت‬
‫افًادٔة افُزى وأردٕا أن ٕذـر ـؾ مْيّة مع مجِة تًرئٍة هلا ؾافىريَة ادثذ فًٍؾ ذفؽ هل اشتخدام‬
‫افَقائؿ افتًرئٍة وافتل تنبف افَائّة افتافٔة‪:‬‬

‫إمؿ ادتحدة‬

‫مْيّة ظادٔة توؿ مًيؿ دول افًامل‬

‫اجلامًة افًربٔة‬

‫‪24‬‬
 ‫مْيّة إؿِّٔٔة توؿ افدول افًربٔة‬

‫آحتاد إوريب‬

‫مْيّة إؿِّٔٔة توؿ مجٔع افدول إوروبٔة‬

‫إذا ٓحيت هذه افَائّة جٔدا ؾسسى أن ـؾ ظْك حيتقي ظذ جزأجـ‪ 9‬إول هل افُِّة افتل شٔتؿ‬
‫تًريٍٓا أما اجلزء افثاين ؾٓل اجلِّة افتًرئٍة فذا بافبداهة شْحتاج إػ وشّغ أحدمها إلضاؾة افُِّة‬
‫وأخر إلضاؾة افتًريػ‪ ،‬مع رضورة اشتخدام افقشؿ <‪ >dl‬فتًرف افَائّة افًامة‪ -‬ويتؿ إؽالؿف بًد‬
‫آخر ظْك ذم افَائّة باشتخدام وشؿ اإلؽالق <‪->.dl‬‬

‫إلضاؾة ظْاس افَائّة ٕستخدم افقشؿ <‪ >dt></dt‬فُِِامت ئِٓا افقشؿ <‪ >dd></dd‬فِجّؾ‬
‫ـام ذم ادثال افتايل‪9‬‬
‫>‪<dl‬‬

‫>‪</dt‬إمؿ ادتحدة>‪<dt‬‬

‫>‪</dd‬مْيّة ظادٔة توؿ مًيؿ دول افًامل>‪<dd‬‬

‫>‪</dt‬اجلامًة افًربٔة>‪<dt‬‬

‫>‪</dd‬مْيّة إؿِّٔٔة توؿ افدول افًربٔة>‪<dd‬‬

‫>‪</dt‬اإلحتاد إوريب>‪<dt‬‬

‫>‪</dd‬مْيّة إؿِّٔٔة توؿ مجٔع افدول إوروبٔة>‪<dd‬‬

‫>‪</dl‬‬

‫‪25‬‬
 ‫افهقر‬ ‫‪3‬‬

‫‪ 3-0‬أنقاع افهقر وؾروؿاهتا‬

‫أؿهد بْقع افهقرة آمتداد افتل يُّـ أن تٖخذه أي صقرة‪ ،‬وتقجد هْاك افُثر مـ آمتدادات‬
‫فُـ شْتحدث هْا ظـ ثالثة ؾَط هل إـثر صٔقظا واشتخداما‪-‬‬

‫ذم افبداية وذم حال ـْت دمٓؾ ذفؽ ؾ٘ن امتداد أي مِػ يرمز إػ اشؿ افىريَة افتل تؿ اشتخدامٓا فـ‬
‫تُقيد (متثٔؾ) ادِػ ؾّثال ظْدما ٕناهد أي مِػ مْتٓل بآمتداد )‪ًٕ ، (.html‬رف مباذة أنف تؿ‬
‫تُقيده (متثِٔف) باشتخدام فٌة ‪ xhtml‬وبافْسبة فِهقر ؾرمز آمتداد إػ افىريَة افتل بقاشىتٓا تؿ‬
‫ضٌط افهقرة‪.‬‬

‫‪JPG‬‬

‫هذه افىريَة هل إـثر صٔقظا‪ ،‬وؿد تؿ تىقيرها هبدف ضٌط افهقر افتل تزيد ظذ ‪ 05‬مِٔقن فقن‬
‫خمتٍِة وظادة ما يُقن افهقر افىبًٔٔة‪ -‬يتؿ حٍظ افهقر ظذ آمتداد ‪ JPG‬وأحٔإا ظذ آمتداد‬
‫‪jpeg‬ـاختهار فِّجّقظة افَائّة ظذ تىقير هذه افىريَة ‪(Joint Photographic Expert‬‬
‫‪ -Group).‬ومتِتؽ هذه افىريَة ؿدرة ظافٔة ظذ ضٌط أحجام افهقر فُـ بافىبع فُؾ رء ثّـ‬
‫وهْا يُقن ؾَدان رء مـ اجلقدة‪.‬‬

‫‪PNG‬‬

‫تًد هذه افىريَة إحدث مـ بغ افُؾ‪ -‬ـان افداؾع وراء تىقيرها؛ تقؾر بديؾ ومْاؾس فالمتداد‬
‫‪GIF‬ذم زمـ ـان ادستخدم جمز ظذ دؾع رشقم مادية ٓشتخدام هذا إخر‪.‬‬

‫إتؼ اشتخدام امتداد ‪ PNG‬حتك أصبح يْير ظِٔف ـثر مـ ادزجمغ ظذ أنف امتداد صقر افقيب‬
‫فَدرتف افًافٔة ظذ ضٌط افرشقمات وإصُال افتل ٓ حتتقي ظذ افُثر مـ إفقان‪ -‬وؿد شاظد ظذ‬
‫هذا إٓتنار تقؾر ٕقظغ هلذا آمتداد؛ إوػ يتؿ ضٌىف باشتخدام ‪ 7‬بت أما افثاين ؾباشتخدام ‪13‬‬

‫‪26‬‬
‫بت وهذا إخر ؿابؾ ظذ ضٌط افهقر افتل تزيد ظذ ‪ 05‬مِٔقن فقن وهق ذم هذا ـْيره افـ‪، JPG‬‬
‫فُـ يتّٔز ذم ـقٕف ٓ يٍَد افهقرة جقدهتا وـذفؽ متُْٔف مـ متثٔؾ افهقر حتت خٍِٔة صٍاؾة‪-‬‬

‫مثال فهقرة ‪ PNG‬ذات خٍِٔة صٍاؾة‬

‫‪GIF‬‬

‫هق آمتداد إصٓر ذم افنبُة بًد امتداد ‪ JPG‬حسب وئُبٔديا‪ ،‬فُـ ييؾ ‪ PNG‬أحسـ مْٓا مـ‬
‫ٕاحٔة ضٌط افهقر ؾافوٌط بقاشىة ‪ GIF‬يتقؿػ ظذ ‪ 145‬فقن بْٔام ‪ PNG‬يستىٔع ضٌط افهقر‬
‫افتل تزيد ظذ ‪ 05‬مِٔقن فقن‪.‬‬

‫فٔس ادَهقد مـ هذا افُالم افتٍْر ظـ اشتخدام ‪ GIF‬ؾٍل بًض إحٔان يُقن اشتخدامف حتّل‬
‫إذ هق افقحٔد افذي يسّح بٕ٘تاج صقر متحرـة‪ ،‬وهذا مٔزة يٍْرد هبا ظـ باؿل آمتدادات‪.‬‬

‫أخرا جرى ظادة ادهّّغ ظذ اشتخدام امتدادات افهقر حسب أيت‪:‬‬

‫‪ JPG‬فِهقر افىبًٔٔة وادْاطر وإصخاص و بنُؾ ظام افهقر افتل حتقي أخقإا ـثرة‬ ‫‪-0‬‬

‫‪ PNG -1‬فِرشقمات وإصُؾ افتل حتقي ظذ افَِٔؾ مـ إفقان وأحٔإا مع ما ذـرٕا ظـ‬
‫‪ JPG‬فُـ باشتخدام ‪ 13‬بت‪-‬‬

‫‪ GIF -2‬فِهقر ادتحرـة وأحٔإا فِرشقمات وإصُؾ افتل حتقي ظذ افَِٔؾ مـ إفقان‪-‬‬

‫‪ 3-1‬إضاؾة صقرة‬

‫ؿبؾ أن ٕؼع ذم اشتدظاء صقرة ما فٔيٓر ذم صٍحتْا ٓبد أن ْٕتبف إػ مُان تقاجد تِؽ افهقرة ذم‬
‫احلاشقب حٔث أنْا شَْقم ب٘رصاد ادتهٍح إػ مُان تقاجد افهقرة ذم افَرص افهِبة بافْسبة دُان‬
‫تقاجد صٍحة افقيب افتل ٕريد اشتدظاء افهقرة إفٔٓا ؾُِام ـان مقضع افهقرة أؿرب مـ مقضع‬
‫افهٍحة ـِام ـان خىقات إرصاد ادتهٍح أؿؾ فذا يْهح بقضع افهقر افتل ٕريد اشتًامهلا ذم مقؿًْا‬
‫ذم ٍٕس جمِد حٍظ صٍحات ادقؿع أو إٕناء جمِد ؾرظل داخؾ ادجِد افذي تتقاجد ؾٔف صٍحات‬
‫ادقؿع ثؿ ٕسّٔف ‪ images‬وٕوع داخِف مجٔع افهقر ادراد اشتدظائٓا إػ صٍحات مقؿًْا ومجٔع‬
‫ادهّّغ يتبًقن هذا إشِقب‪ ،‬وذم ـؾ حال أجا ـان مُان افهقرة ؾْٕ٘ا ٕستخدم افقشؿ ‪img‬‬

‫‪27‬‬
‫إلخبار ادتهٍح أنْا ظذ وصؽ اشتدظاء صقرة إػ هذه افهٍحة ثؿ ٕستخدم اخلاصٔة ‪ٓ src‬شتدظاء‬
‫افهقرة مـ مُإف ـام يع‪9‬‬

‫>‪<body‬‬
‫>‪<img src="arab_states.jpg" /‬‬
‫>‪</body‬‬

‫‪ img‬هق وشؿ إضاؾة صقرة‬ ‫‪‬‬

‫‪ src‬فدٓفة ادتهٍح ظذ مُان تقاجد افهقرة‬ ‫‪‬‬

‫‪ arab_states.jpg‬هق اشؿ افهقرة مع امتدادها )‪- (.jpg‬‬ ‫‪‬‬

‫ذم هذا ادثال تؿ افتىبٔؼ ظذ صقرة متقاجدة ذم ٍٕس جمِد مِػ افهٍحة حٔث ُٕتٍل بذـر اشؿ‬
‫افهقرة وصٌٔتٓا أما فق ـان افهقرة ذم مُان آخر ؽر جمِد مِػ افهٍحة ؾًْدها يُقن فديْا‬
‫حافتغ‪9‬‬

‫‪ -0‬احلافة إوػ هل أن تُقن افهقرة ذم جمِد ؾرظل داخؾ جمِد مِػ افهٍحة ـام يع‪9‬‬

‫‪D:\website\images‬‬

‫حٔث يتقاجد مِػ افهٍحة داخؾ ادجِد ‪ website‬و افهقرة داخؾ ادجِد افٍرظل ‪images‬‬
‫ظْدها ٕؤػ افهقرة بذـر ادجِد افذي حيقي افهقرة ثؿ ٕذـر افهقرة مع افٍهؾ بْٔٓام بـ ‪.‬‬
‫>‪<body‬‬
‫>‪<img src="images/arab_states.jpg" /‬‬
‫>‪</body‬‬

‫‪ -1‬احلافة افثإٔة هل أن تُقن افهقرة خارج ادجِد افذي حيقي مِػ افهٍحة ـام يع‪:‬‬

‫‪D:\images\website‬‬

‫هذه ظُس احلافة إوػ حٔث جمِد افهقر هق افرئٔز وأخر هق افٍرظل ظْدها يُقن مسار‬
‫افهقرة ـام يع‪9‬‬
‫>‪<body‬‬
‫>‪<img src="../images/arab_states.jpg" /‬‬

‫‪28‬‬
‫>‪</body‬‬

‫وتًْل افَْىتان أنْا ٕرجع بَدر جمِد إػ افقراء ثؿ ٕدخؾ ادجِد ادسّك ‪ images‬ما يًْل ْ‬
‫أن فق ـان‬
‫افهقرة ذم افَرص ‪ d:/‬مباذة حا احتجْا إػ ذـر ادجِد ‪ images‬بؾ ـْا شُْتٍل بافَْىتغ ؾَط‬
‫وـٖنْا َٕقل فِّتهٍح‪ 9‬ارجع خىقة واحدة فِقراء وابحث ظـ افهقرة ادسّك‬
‫‪-arab_states.jpg‬‬

‫وأخرا جيدر اإلصارة أنف مـ ادُّـ أن تُقن فِهقرة داخؾ جمِدات ؾرظٔة أـثر مـ واحد أو أن‬
‫تسبَٓا جمِدات رئٔسٔة أـثر مـ واحد ظْدها ٕذـر مجٔع ادجِدات حتك ٕهؾ فِهقرة إذا ـإت‬
‫ادجِدات ؾرظٔة أو ٕرمز فُؾ جمِد وراء جمِد افهقرة بـ ‪ --/‬حتك ٕهؾ إػ افهقرة‪-‬‬

‫خهائص افهقر‪9‬‬

‫ؿِْا أنْا ٕستخدم وشامً ذايت اإلؽالق إلضاؾة صقرة وهق ‪ img‬وٕؤػ افهقرة – أي مسار تقاجدها‬
‫ذم افَرص ‪ ,‬ذم اخلاصٔة ‪ src‬ـام يع‪9‬‬
‫>‪<body‬‬
‫>‪<img src="images/arab_states.jpg" /‬‬
‫>‪</body‬‬

‫وأن إذا ؿّت بتجربة هذا ادثال مع تبديؾ مسار افهقرة إػ مسار صقرة متقاجد ذم حاشقبؽ‬
‫ؾسسى أن افهقرة ييٓر حسب حجّٓا افًٍع‪ -‬ذم احلََٔة يقجد هْاك خاصٔتغ إلظادة حتديد حجؿ‬
‫افهقرة فُْل ٓ أحبٓام ؾُام ذـرت فؽ ذم افبداية ٕستخدم ‪ xhtml‬فِّوّقن و ‪ – CSS‬افذي مل‬
‫ٕناهد رء مْف حتك أن – فِنُؾ‪-‬‬

‫شٖخزك ظـ هاتغ اخلاصٔتغ ؾَط ٕجؾ مًرؾتؽ بقجقدمها فُـ أرجقا أن ٓ تستخدمٓام ؾـ ‪CSS‬‬
‫شٔتٍُؾ بقطٍٔتٓام بٍُاءة‪-‬‬

‫خاصٔتا حتديد احلجؿ‪9‬‬

‫اخلاصٔتان مها ‪ width‬فتحديد افًرض و ‪ height‬فتحديد افىقل ويٖخذان ؿٔؿ رؿّٔة بقحدة افَٔاس‬
‫بُسؾ ـام يع‪9‬‬
‫>‪<body‬‬
‫"‪<img src="images/arab_states.jpg" with="300‬‬
‫>‪height="250" /‬‬

‫‪3/‬‬
‫>‪</body‬‬

‫ٕتٔجة هذا ادثال شُٔقن اطٓار افهقرة بحجؿ ‪ 2//‬ظرضا و ‪ 14/‬ضقٓ‪-‬‬

‫خاصٔة افْص افبديؾ‪9‬‬

‫إن مّٓة هذه اخلاصٔ ة هل ضامن طٓقر رء مُان افهقرة ظْدما يًتذر طٓقر افهقرة بٖي شبب‬
‫ـان‪ ،‬ـذـر صقرة ؽر متقاجدة ؾًِٔا ظذ احلاشقب أو حذف افهقرة مع مرور افقؿت أو حتك بطء‬
‫إسٕت فدى ادستخدم‪-‬‬

‫ٕستخدم اخلاصٔة ادسّك ‪ alt‬وافتل تًْل افْص افبديؾ بافٌِة إُِٓٔزية (‪ )alternative text‬أما‬
‫ؿّٔتٓا ـام يدل ظِٔٓا اشّٓا ؾٓق ٕص مـ ادٍسض ظْد ؿراءتف أن يٍٓؿ افزائر ماهٔة افهقرة افتل‬
‫ـإت مـ ادٍسض أن تيٓر بدٓ مـ افْص‪-‬‬
‫>‪<body‬‬

‫>‪" /‬خريىة افدول افًربٔة"=‪<img src="arab_states.jpg" alt‬‬

‫>‪</body‬‬

‫وجيدر آصارة أن ـؾ متهٍح فف ـٍٔٔة خاصة ذم افتًامؾ مع هذه اخلاصٔة فذا مـ إحسـ دمربتٓا ذم‬
‫ظدت متهٍحات‪ ،‬ؾّثال ظْد اظتذار طٓقر افهقرة ؾجقجؾ ـروم ٓ ييٓر افْص افبديؾ أبدا وإٕام‬
‫يُتٍل ب٘طٓار أجَقٕة صٌرة ذم ادُان ادٍسض أن تيٓر افهقرة أما ؾرؾُس ؾٔوع افْص افبديؾ‬
‫مُان افهقرة وذم حال مل يتؿ إضاؾة ٕص بديؾ ؾال يوع أي رء ما يًْل أن افزائر جيٓؾ متاما اؾساض‬
‫طٓقر هذه افهقرة ومـ هْا تُتسب هذه اخلاصٔة أمهٔة خاصة‪-‬‬

‫خاصٔة ادساظدة‪9‬‬

‫جرى ظادة مًيؿ ادهّّغ ظذ تسّٔة هذه اخلاصٔة بـ » خاصٔة افًْقان « متاصٔا مع اشّٓا ‪title‬‬
‫فُـ أنا أؾوؾ تسّٔتٓ ا خاصٔة ادساظدة حٔث إحسـ اشتخدامٓا فؼح افهقرة واظتبار اخلاصٔة‬
‫افسابَة (أي ‪ )alt‬ـًْقان‪-‬‬

‫تيٓر ؿّٔة هذه اخلاصٔة ذم مربع صٌر ظْد وضع مٗذ افٍٖرة ؾقق افهقرة‪ ،‬وتبَك خٍٔة ؾٔام دون‬
‫ذفؽ‪-‬‬
‫>‪<body‬‬

‫‪30‬‬
 ‫بٔان "=‪" title‬خريىة افدول افًربٔة"=‪<img src="arab_states.jpg" alt‬‬

‫>‪"/‬احلدود بغ افدول إظواء ذم اجلامًة افًربٔة‬

‫>‪</body‬‬

‫اخلالصة‪9‬‬

‫أن وؿد إتْٓٔا مـ درس إضاؾة افهقر ومـ ؿبِف مًاجلة افْهقص‪ ،‬مل يبؼ إٓ أن ٕٖيت بّثال أخر‬
‫يُقن بّثابة اخلالصة هلاذيـ افدرشغ‪-‬‬
‫>‪<body‬‬

‫>‪</h2‬افربٔع افًريب>‪<h2‬‬

‫"خريىة افدول افًربٔة"=‪<img src="arab_spring_map.png" alt‬‬

‫>‪" /‬حافة افدول افًربٔة أثْاء افثقرات افًربٔة"=‪title‬‬

‫افثقرات افًربٔة‪ ،‬أو افربٔع افًريب أو ثقرات افربٔع افًريب ذم اإلظالم‪ ،‬هل حرـة احتجاجٔة >‪<p‬‬

‫شِّٔة ضخّة إىَِت ذم ـ ُِّؾ افبِدان افًربٔة خالل أوخر ظام ‪ 2111‬ومىِع ‪ ،2111‬متٖثرة‬
‫>‪<strong‬بافثقرة افتقٕسٔة افتل إدفًت جراء إحراق‬

‫>‪</em‬حمّد افبقظزيزي>‪<em‬‬

‫>‪</strong‬‬ ‫ٍٕسف وٕجحت ذم اإلضاحة بافرئٔس افسابؼ زيـ افًابديـ بـ ظع‪ ،‬وـان مـ أشباهبا‬
‫افسٔاد‬
‫ّ‬ ‫آؿتهادي وشقء إحقال ادًَٔنٔة‪ ،‬إضاؾة إػ افتؤٔؼ‬
‫ّ‬ ‫إشاشٔة إتنار افٍساد وافرـقد‬
‫‪.‬وإمْل وظدم ٕزاهة إٓتخابات ذم مًيؿ افبالد افًربٔة‬
‫>‪</p‬‬

‫ٕجحت افثقرات باإلضاحة بٖربًة أنيّة >‪<p‬‬

‫ما زافت ثقرة شقرية مستّرة مىافبة ب٘شَاط ٕيام بنار "=‪<acronym title‬‬

‫حتك وؿت ـتابة هذه افسىقر>"إشد‬

‫افثقرة افتقٕسٔة ٕجحت ثقرة ‪ 25‬يْاير ادكية ب٘شَاط افرئٔس >‪</acronym‬‬ ‫‪ ،‬ؾبًدَ‬
‫افسابؼ حمّد حسْل مبارك‪ ،‬ثؿ ثقرة ‪ 17‬ؾزاير افِٔبٔة بَتؾ مًّر افَذاذم وإشَاط ٕيامف‪ ،‬ؾافثقرة‬
‫‪.‬افّْٔٔة افتل أجزت ظع ظبد اهلل صافح ظذ افتْحل‬

‫‪31‬‬
 ‫>‪</p‬‬
‫>‪<p‬‬

‫وأما احلرـات آحتجاجٔة ؾَد بٌِت مجٔع أنحاء افقضـ افًريب‪ ،‬وـإت أـزها هل >‪<q‬‬

‫صٓرا ذم ـؾ افدول‬
‫ً‬ ‫ظريب أصبح‬
‫ّ‬ ‫حرـة آحتجاجات ذم شقريا‪ -‬متٔزت هذه افثقرات بيٓقر هتاف‬
‫‪:‬افًربٔة وهق‬

‫افنًب يريد إشَاط افْيام>‪</q‬‬

‫>‪</p‬‬
‫>‪</body‬‬

‫شُٔقن ٕتٔجة هذا ادثال ـأيت‪9‬‬

‫افنُؾ ‪0-3‬‬

‫تًّدت اشتخدام متهٍح ؾرؾُس فتجربة هذا ادثال ـل ٕالحظ اخلط ادَْط افذي ييٓر حتت "حتك‬
‫ّ‬
‫وؿت ـتابة هذه افسىقر"‪ ،‬ؾَد اشتخدمت هْا وشؿ ‪ acronym‬افذي ؿِْا أنف يستخدم فؼح‬
‫آختهارات‪ -‬مـ افقاضح أين مل أشتخدم أي اختهار فُْل أردت أن أوضح فِزائر شبب اشتخدامل‬

‫‪32‬‬
‫هلذه افًبارة‪ ،‬وما أن يوع افزائر مٗذ افٍٖرة ؾقؿٓا حتك تيٓر فف مربع صٌر مُتقب ظِٔف‪" 9‬ما زافت‬
‫ثقرة شقرية مستّرة مىافبة ب٘شَاط ٕيام بنار إشد"‪-‬‬

‫‪33‬‬
 ‫افروابط افتنًٔبٔة‬ ‫‪4‬‬

‫افروابط افتنًٔبٔة (أو افقصالت ـام يسّٔٓا افبًض) هل افتل ختِؼ فْا افتٍاظؾ بغ صٍحات ادقؿع‬
‫افقاحد أو بغ ظدة مقاؿع‪ ،‬حٔث يتُقن ادقؿع افقاحد مـ ظدة صٍحات يتؿ إٓتَال بْٔٓا باشتخدام‬
‫ما يسّك افروابط افتنًٔبٔة‪-‬‬

‫هْاك ٕقظان مـ افروابط أحدمها داخع وأخر خارجل وأجا ـان ٕقع افرابط ادراد إضاؾتف ؾْٕ٘ا‬
‫ٕستخ ـ ــدم افقشؿ ادزدوج <‪ 9>a href=""></a‬حٔث ٕوع افهٍحة ادراد إٓتَال إفٔف داخؾ‬
‫اخلاصٔة ‪ href‬أما ٕص افرابط ؾْوًف بغ وشّل آؾتتاح واإلؽالق وهق ما شٔيٓر فِزائر ـام هق ذم‬
‫ادثال افتايل‪9‬‬
‫>‪<body‬‬

‫>‪</a></p‬مقؿع افَّرية>"‪<p><a href="http://www.alkamaria.net‬‬

‫>‪</body‬‬

‫شُٔقن ٕتٔجة هذا ادث ال؛ طٓقر ظبارة "مقؿع افَّرية" بافِقن إزرق ومسىر مع ؿابِٔة افَْر ظِٔٓا‬
‫فالٕتَال إػ مقؿع افَّرية (‪-)www.alkamaria.net‬‬

‫‪ 4-0‬افروابط اخلارجٔة (إػ مقؿع آخر)‬

‫ـام هق مذـقر ذم افًْقان ؾْٕ٘ا ٕستخدم افروابط اخلارجٔة فالٕتَال مـ مقؿًْا إػ مقؿع آخر ذم حمٔط‬
‫ظامل اإلٕس ٕت‪ ،‬وضبًا يقضح ادثال افسابؼ ـٍٔٔة ؾًؾ ذفؽ فُـ ما ظِْٔا مًرؾتف هق أنْا ؿد ٕقد أن‬
‫ٕرشؾ افزائر إػ صٍحة حمددة داخؾ ادقؿع ادراد إٓتَال إفٔف وـذفؽ ؿد ٕوىر إػ إضاؾة روابط‬
‫حتتقي ظذ إصارات مثؾ & شقاء ذم افروابط افداخِٔة أو اخلارجٔة ـام ذم افرابط افتايل‪9‬‬

‫‪http://www.alkamaria.net/news.php?action=view&id=35‬‬

‫ذم حافة إرشال افزائر إػ صٍحة حمددة ذم مقؿع ما َٕقم بقضع رابط ادقؿع ثؿ ذضة ‪ .‬ثؿ اشؿ‬
‫افهٍحة ادرادة‪ ،‬وهل ‪ news.php‬ذم حافتْا هذه‪.‬‬

‫‪34‬‬
‫مالحية‪ 9‬اشؿ افهٍحة هل ‪ news.php‬بامتداد ‪ٕ .php‬ن افهٍحة بافذات حمٍقطة هبذه آمتداد‬
‫ٓحتقائٓا ظذ أوامر برجمٔة مـ فٌة ‪ php‬أما فق ـان صٍحة ظادية بٌِة ‪ html‬فُتبْا‬
‫‪- news.htm‬أما ذم حافة احتقاء افرابط ظذ رمقز & ؾْٕ٘ا َٕقم باشتبداهلا إػ افرمز ادَابؾ فف ذم فٌة‬
‫‪xhtml‬وهق ;‪ -&amp‬هذا مع افًِؿ أنف بّجرد وضع افرمز & شًّٔؾ افهٍحة دون مناـؾ فُـ‬
‫تًد ذفؽ خىٖ بافْسبة فًِّاير افَٔاشٔة وشْرى ذفؽ ظْد احلديث ظْٓا‪-‬‬

‫بًض خهائص افروابط‪9‬‬

‫اخلاصٔة ‪9title‬‬

‫ؿد أصبح هذه اخلاصٔة مٖخقؾا بافْسبة فؽ‪ ،‬ؾٓل ٍٕس اخلاصٔة افتل اشتخدمْاها مع افهقر‪ ،‬وتًّؾ‬
‫بٍْس افنُؾ؛ ٓ تيٓر ؿّٔتٓا إٓ ظْد وضع مٗذ افٍٖرة ؾقؿٓا‪ٕ -‬ستخدمٓا مع افروابط ـًْقان‬
‫فِرابط أو فبٔان ما يٗدي إفٔف‪-‬‬
‫>‪<body‬‬

‫"‪<a href="http://www.aljazeera.net‬فًب آظالم افًريب أمثال >‪<p‬‬

‫>‪</a‬ؿْاة اجلزيرة>"مقؿع ؿْاة اجلزيرة ظذ إٓسٕت"=‪title‬‬ ‫دورا بارزا أثْاء افثقرات‬

‫>‪</p‬افًربٔة‬
‫>‪</body‬‬

‫افنُؾ ‪ٕ 90-4‬تٔجة طٓقر ؿّٔة ‪ title‬ظْد وضع ادٗذ ظذ افرابط (ؿْاة اجلزيرة)‬

‫ؾتح رابط ذم ٕاؾذة جديدة‪9‬‬

‫أحٔإا ؿد ٕريد أن ٕرشؾ افزائر إػ مقؿع آخر فُـ دون أن يَقم ب٘ؽالق مقؿًْا ٓشٔام وؿد يًجب‬
‫افزائر بادقؿع افذي أرشِْاه إفٔف ؾِٔتٓل ب ف ويْسك مًاودة تهٍح مقؿًْا‪ ،‬فذا ربام مـ احلُّة أن ٍٕتح‬
‫فف ادقؿع ظذ ٕاؾذة جديدة بحٔث يبَك مقؿًْا مٍتقح يُّْف مالحيتف ذم أي وؿت‪.‬‬

‫‪35‬‬
‫مًيؿ ادتهٍحات اجلديدة تًّد إػ إؽالق هذه اخلاصٔة فُـ مع هذا ؾامزافت هذه اخلاصٔة دمدي‬
‫ًٍٕا ذم بًض احلآت ؾىاحا ؾوؾ افزائر ؾتح هُذا مقؿع ذم ٕاؾذة جديدة‪ٕ .‬ستخدم اخلاصٔة ‪target‬‬
‫ثؿ ًٕىٔف افَّٔة ‪ _blank‬وبافىبع مع افنحىة (_) إجبارا‪-‬‬
‫>‪<body‬‬

‫"‪<a href="http://www.aljazeera.net‬فًب آظالم افًريب أمثال >‪<p‬‬

‫>‪</a‬ؿْاة اجلزيرة>"‪" target="_blank‬مقؿع ؿْاة اجلزيرة ظذ إٓسٕت"=‪title‬‬ ‫دورا‬

‫>‪</p‬بارزا أثْاء افثقرات افًربٔة‬
‫>‪</body‬‬

‫ضبًا شُٔقن افْتٔجة ـسابَف فُـ هذه ادرة شٔتؿ ؾتح ‪ www.aljazeera.net‬ذم ٕاؾذة جديدة‪-‬‬

‫‪ 4-1‬افروابط افداخِٔة‬

‫بًد أن حتدثْا ظـ افروابط اخلارجٔة ٕٖيت فِروابط افداخِٔة افتل هل إهؿ مادامت هل افتل ختِؼ فْا‬
‫افتٍاظؾ بغ صٍحات مقؿًْا ـام شبؼ وأذت‪ ،‬وٓبد أن ٕنر أوٓ أنف يُّـ إضاؾة افروابط افداخِٔة‬
‫باتباع أشِقب افروابط اخلارجٔة أي بقضع اشؿ ادقؿع ثؿ افهٍحة ادراد إٓتَال إفٔٓا‪ .‬ؾِق أنْا ِّٕؽ‬
‫صٍحتغ ‪ index.html‬و ‪ news.html‬متقاجديـ ذم مقؿع ‪ www.site.com‬ؾُّْْٔا وضع‬
‫رابط ذم ـؾ وا حدة مْٓام فالٕتَال إػ إخرى ظـ ضريؼ وضع اشؿ ادقؿع بافُامؾ ثؿ اشؿ افهٍحة‬
‫ـام يع‪:‬‬

‫>‪<a/‬افهٍحة افرئٔسٔة>"‪<a href="www.site.com/index.html‬‬

‫>‪<a/‬إخبار>"‪<a href="www.site.com/news.html‬‬

‫أما إشِقب افثاين وإمثؾ ؾٓق ـتابة اشؿ افهٍحة ادراد إٓتَال إفٔف مباذة مع مراظاة مسار تقاؾر‬
‫ادٍِات ظذ احلاشقب ـام شبؼ وحتدثْا ظْف ذم درس إضاؾة افهقر‪-‬‬

‫>‪<a/‬افهٍحة افرئٔسٔة>"‪<a href="index.html‬‬

‫>‪<a/‬إخبار>"‪<a href="news.html‬‬

‫‪36‬‬
‫هذان ادثآن يّثالن تقاجد ـؾ افهٍحات ذم جمِد واحد أما فق ـان افهٍحات ذم جمِدات خمتٍِات‬
‫ؾٔجب حْٔٓا حتديد مسار ادجِد بافُامؾ‪ ،‬ؾّثال إذا ـان فديْا صٍحة ثافثة (‪ )about.html‬متقاجد‬
‫ذم جمِد ؾرظل هق ‪ doc‬ؾببساضة يُقن افرابط إػ هذه افهٍحة ـام يع‪9‬‬

‫>‪<a/‬مـ ٕحـ>"‪<a href="doc/about.html‬‬

‫‪ 4-2‬رابط ارشال رشافة‬

‫يُّـ بُؾ بساضة إضاؾة رابط بريد إفُسوين بحٔث إذا َٕر ظِٔف افزائر يٍتح فف صٍحة إرشال رشافة‬
‫إػ صاحب تِؽ افزيد ظـ ضريؼ برٕامج إرشال وتهٍح افرشائؾ ‪ Microsoft Outlook‬وذفؽ‬
‫ـام ذم ادثال افتايل‪9‬‬

‫>‪<a/‬اتهؾ بْا>" ‪<a href=" mailto:mymail@domaine.com‬‬

‫ٕؤػ افزيد آفُسوين مُان افرابط مسبقؿا بُِة ‪ mailto :‬مع افَْىتغ ضبًا‪-‬‬

‫‪ 4-3‬رابط إػ مقضع حمدد‬

‫ماذا فق ـْت متِؽ صٍحة ضقيِة جدا ؟ أخٔس مـ اجلٔد فق أنؽ تستىٔع ارشال افزائر إػ ؾَرة مًْٔة‬
‫وتٍُل ظْف ظْاء افبحث ظْف؟ هذا ما ًْٕٔف مـ افرابط إػ مقضع حمدد؛ امُإٔة إناء رابط ٕي ظْك‬
‫ذم افهٍحة وظْد افَْر ظِٔف يتؿ َٕؾ افزائر مباذة إػ مقضع افًْك‪ -‬إلٕناء رابط مـ هذا افْقع ٕتبع‬
‫اخلىقات افتافٔة‪9‬‬

‫‪ -0‬أوٓ‪ًٕ 9‬ىل افٍَرة (أو أي ظْك آخر) اشام وحٔدا مـ اختٔارٕا باشتخدام اخلاصٔة ‪ id‬ـام‬
‫يع‪9‬‬
‫>‪<body‬‬

‫>‪</p‬ؾَرة أشباب ثقرات افربٔع افًريب>"‪<p id="motivations‬‬

‫>‪</body‬‬

‫باشتخدام اخلاصٔة ‪ُٕ id‬قن ؿد خههْا آشؿ افقحٔد ‪ motivations‬هلذه افٍَرة واخلىقة افتافٔة‬
‫تبغ ـٍٔٔة آشتٍادة مْٓا إلٕناء رابط يٗدي إػ هذه افٍَرة‪-‬‬

‫‪37‬‬
‫‪ -1‬ثإٔا‪َٕ 9‬قم بٕ٘ناء افرابط افذي شٔٗدي إػ افٍَرة ادًْٔة وًٕىٔف اشؿ افٍَرة ـَّٔة مسبقؿا‬
‫بًالمة ادربع ‪ ٓ( -#‬تْسك أن اشؿ افٍَرة هل ؿّٔة اخلاصٔة ‪-)id‬‬
‫>‪<body‬‬

‫>‪</a></p‬أشباب افثقرات افًربٔة>"‪<p><a href="#motivations‬‬

‫>‪</body‬‬

‫وأن يُّْؽ اشتخدام افّْقذج افتايل فتجربة مثال ؾًع‪9‬‬

‫>‪<body‬‬

‫>‪</a></p‬أشباب افثقرات افًربٔة>"‪<p><a href="#motivations‬‬

‫>‪</p‬ؿؿ بُتابة ٕص ضقيؾ جدا هْا>‪<p‬‬

‫>‪</p‬ؾَرة أشباب ثقرات افربٔع افًريب>"‪<p id="motivations‬‬

‫>‪</body‬‬

‫شتُقن افْتٔجة طٓقر ادحتقى مـ بداية افهٍحة فُـ ظْد افَْر ظذ افرابط » أشباب افثقرات‬
‫افًربٔة « شْٔتَؾ بؽ ادتهٍح مباذة إػ » ؾَرة أشباب ثقرات افربٔع افًريب «‪-‬‬

‫ؾُرة‪ 9‬يُّْؽ إضاؾة رابط أشٍؾ افهٍحة مع ظالمة ادربع ؾَط (‪ )#‬ـَّٔة وظْد َٕر افزائر ظِٔف‬
‫ئًده مباذة إػ بداية ٍٕس افهٍحة افتل يتقاجد ؾٔٓا‪-‬‬

‫وأن ماذا إذا ـان افَْىة ادراد ذم صٍحة آخر؟‬

‫بُؾ بساضة ٕتبع ٍٕس اخلىقات افسابَة فُـ هذه ادرة ُٕتب افرابط اخلارجل بام ؾٔٓا افهٍحة ادذي‬
‫ٕريد إرشال افزائر إفٔف ومـ ثؿ َٕقم ب٘ضاؾة جزء رابط ادقضع ادحدد ؾِق أنْا ٕريد إرشال افزائر إػ‬
‫مقؿع افَّرية داخؾ صٍحة إخبار ‪ news.html‬ظذ ؾَرة وضًت هلا خاصٔة ‪ id‬باشؿ‬
‫‪ arabic_news‬ؾسُٔقن افرابط ـام يع‪9‬‬
‫>‪<body‬‬
‫‪<a‬‬
‫إخبار >"‪href="http://www.alkamaria.net/news.html#arabic_news‬‬

‫>‪</a‬افًربٔة ظذ مقؿع افَّرية‬

‫>‪</body‬‬

‫‪38‬‬
4/
 ‫أساسياث نغت ‪CSS‬‬
‫افتْسَٔات إشاشٔة فًْاس ‪xhtml‬‬

‫‪40‬‬
41
 ‫مٍٓقم صٍحات إنامط‬ ‫‪5‬‬

‫ظْدما يْتٓل أحدهؿ ببْاء بٔت ؾال صؽ أنف يسًد بامتالـف بٔتا جديدا‪ ،‬فُـ يبَك ؾرحف حمدود حٔث‬
‫يبَك ظِٔف تٖثٔث افبٔت واشتُامل اإلجراءات افْٓائٔة افتل شتجًؾ مـ بٔتف مُإا صاحلا فِسُـ‪ -‬هذا‬
‫افقصػ يتىابؼ بنُؾ أو بآخر مع مقضقع حديثْا ؾـ ‪ xhtml‬بّثابة اجلدران ادبْٔة باإلشّْت‬
‫وافىقب بْٔام ‪ CSS‬يَقم مَام افدهان وإثاث وافديُقر بنُؾ ظام‪-‬‬

‫هذا باختهار مٍٓقم صٍحات إنامط فُـ جيب أن أنبٓؽ أن بًض برامج تهّٔؿ ادقاؿع ــ‬
‫‪ Microsoft FrontPage‬تدظل ؿدرهتا ظذ تهّٔؿ مقاؿع باشتخدام ‪ xhtml‬و ‪ -CSS‬ؿد يْخدع‬
‫ادبتدئ ظْدما يناهد أنف ؾًال تَقم هذه افزامج بًّؾ مقاؿع تبدوا ذم ٕيرهؿ رائًة جدا‪ ،‬فُـ ما أن‬
‫تؼع ذم دراشة ‪ CSS‬حتك تٍٓؿ حََٔة تًَٔد تِؽ افزامج فًّؾ ادهّؿ‪ ،‬ؾاحلََٔة مل تزل تِؽ‬
‫افزامج تستخدم افْسخة إوػ فـ ‪ CSS‬مع خهائص وأوامر ربام مَْرضة مل يًد أحد يستخدمٓا بؾ‬
‫ومل يًد ادتهٍحات اجلديدة تٖخذها بًغ آظتبار وؾقق هذا تًتز أخىاء حسب ادًاير افَٔاشٔة‪-‬‬

‫يًقد افسبب وراء طٓقر تَْٔة ‪ CSS‬إػ حاجة ادهّّغ فًزل وؾهؾ افتْسٔؼ ظـ ادحتقى‪ -‬وينّؾ‬
‫افتْسٔؼ ظذ إفقان واخلىقط واخلٍِٔات إػ آخره بْٔام ينّؾ ادحتقى ظذ مجٔع ظْاس فٌة ‪xhtml‬‬
‫مـ ظْاويـ وؾَرات‪---‬‬

‫ويًْل هذا افُالم أنْا ٕستخدم تَْٔة ‪ CSS‬ؾَط فِتحُؿ بّيٓر وصُؾ افًْاس دون افتًرض‬
‫فًِْاس ٍٕسٓا‪ -‬ويتُقن افتهّٔؿ افْٓائل ٕي مقؿع مـ مجِة خهائص ‪ CSS‬ادستخدمة فِتحُؿ‬
‫بٖي ظْك ذم ادقؿع‪-‬‬

‫وأخرا أرى فزوما ظع أن أنبٓؽ أن تَْٔة ‪ CSS‬تتىقر بنُؾ رسيع جدا مما جًؾ بًض متهٍحات‬
‫افقيب تتٖخر ذم دظؿ افتحسْٔات اجلديدة اددخِة ذم هذه افتَْٔة فذا مـ افرضوري جدا متابًة أخبار‬
‫دظؿ متهٍحات افقيب فِتحسْٔات اجلديدة ـل تتَاىض منُِة تهّٔؿ مقاؿع ويب ؽر متقاؾؼ مع‬
‫ؽافبٔة ادتهٍحات‪-‬‬

‫‪42‬‬
 ‫ضرق توّغ مِػ ‪ CSS‬داخؾ مِػ ‪html‬‬ ‫‪6‬‬

‫شْتحدث ذم هذا افٍهؾ ظـ افىرق افثالثة افتل بقاشىتٓا يُّْْا دمج أوامر مـ ٕقع ‪ xhtml‬مع‬
‫أوامر أخرى مـ ٕقع ‪ -CSS‬وهل احدى ضرق ثالثة‪ 9‬إما اجراء تْسَٔات ‪ CSS‬مباذة ظذ ـؾ‬
‫ظْك ‪ xhtml‬وإما مجع مجٔع افتْسَٔات ذم رأس افهٍحة وبافتايل اجراء افتْسَٔات ظذ مجٔع ظْاس‬
‫افهٍحة أو إناء مِػ مستَؾ فتْسَٔات ‪ CSS‬وبافتايل امُإٔة اشتدظاء هذا ادِػ إػ مجٔع‬
‫صٍحات ‪ -xhtml‬وؾٔام يع تٍهٔؾ ـٍٔٔة اشتخدام ـؾ ضريَة‪-‬‬

‫‪ 6-0‬توّغ مباذ داخؾ افقشؿ‬

‫تًْل افتوّغ ادباذ داخؾ افقشؿ أن َٕقم بقضع متٌرات (تْسَٔات) ‪ CSS‬داخؾ افقشؿ افذي‬
‫ٕريد تٌٔر خهائهف ـام يع‪9‬‬
‫>‪<body‬‬

‫>";‪<p style="color: blue‬‬ ‫>‪ </p‬هذا ٕص‬

‫>‪</body‬‬

‫ـام ٕالحظ مـ هذا ادثال ؾْٕ٘ا ٕستخدم اخلاصٔة ‪ style‬فٍتح جمال وضع متٌرات افـ ‪ CSS‬افتل‬
‫شتَقم بتْسٔؼ افٍَرة ‪ -p‬ادتٌر ‪ color‬ذات افَّٔة ‪ blue‬ذم هذا ادثال يًْل اطٓار افٍَرة بافِقن‬
‫إزرق بدٓ مـ افِقن إشقد آؾسايض‪-‬‬
‫منُِة هذه افىريَة هق أنْا َٕقم بتُرار ٍٕس افًِّٔة ظذ أي ظْك ٕريد اشتبدال تْسَٔٓا‬
‫آؾسايض‪ ،‬ؾِق ـان فديْا ثالث ؾَرات أخرى مثال وأردٕا تىبٔؼ ٍٕس افتْسٔؼ افسابؼ (أي جًؾ فقن‬
‫افٍَرة أزرق) ؾسٔتحتؿ ظِْٔا تُرار ٍٕس افًِّٔة ظذ وشقم افٍَرات افثالثة‪ -‬يًْل تُرار‬
‫» ";‪ « style="color: blue‬ثالث مرات‪-‬‬

‫‪ 6-1‬توّغ مباذ ظـ ضريؼ رأس افهٍحة‬

‫ختتِػ هذه افىريَة ظـ شابَٓا ذم ـقهنا تَقم بقضع ادتٌرات ذم رأس صٍحة افقيب بدٓ مـ افقشؿ‬
‫بافذات ـام يع‪9‬‬

‫‪43‬‬
‫>‪<head‬‬
‫>"‪<style type="text/CSS‬‬
‫} ;‪P{ Color: blue‬‬
‫>‪</style‬‬
‫>‪</head‬‬

‫افقشؿ ادزدوج >‪ <style></style‬يَقم بٍتح جمال ـتابة افتْسَٔات أما اخلاصٔة ‪ type‬ذم وشؿ‬
‫آؾتتاح ؾتبغ ٕقع افتْسَٔات ظذ أهنا ٕيص مـ ٕقع ‪ -CSS‬وأخرا اجلِّة » } ;‪« P{ Color: blue‬‬
‫هق مًادل اجلِّة » ";‪ « style="color: blue‬ذم افىريَة إول‪ -‬ؿد شِّت هذه افىريَة مـ‬
‫افتُرارات افتل حتدث ذم افىريَة إول‪ ،‬ؾِق اشتًدٕا ٍٕس "مثال افٍَرات افثالثة" افذي حتدثْا ظْف‬
‫ذم افىريَة إول حا احتجْا إػ تُرار افتْسَٔات وإٕام يٍُل ـتابة اجلِّة » } ;‪« P{ Color: blue‬‬
‫مرة واحدة‪-‬‬
‫يًاب ظذ هذه افىريَة أمريـ اثْغ؛ أوهلام يُّـ ذم ـقن أي تْسٔؼ يىبؼ ظذ ظْك ما يتؿ تٍْٔذها‬
‫ظذ مجٔع افًْاس ذم افهٍحة ؾٍل ادثال افسابؼ شٔتؿ اطٓار مجٔع افٍَرات بافِقن إزرق‪ -‬فِتخِص‬
‫مـ هذه ادنُِة ِٕجٖ إػ اشتخدام ادًرف ‪ id‬افذي شبؼ واشتخدمْاه ذم درس إناء ارتباط إػ‬
‫وضع حمدد وشْتحدث ظْف ٓحَا بافتٍهٔؾ‪ -‬وإمر افثاين افذي يًاب ظِٔف هذه افىريَة هق أنف فق‬
‫ـْا ِّٕؽ أـثر مـ صٍحة ويب ‪ ,‬وهل احلافة دائام – ؾْٕ٘ا شْوىر إػ تُرار افتْسَٔات ادتناهبة ذم‬
‫ـؾ افهٍحات‪ ،‬وؿد يبدوا إمر شٓال مع بوع صٍحات فُـ ظْدما يتُقن فْا مقؿع مع مئات‬
‫افهٍحات ؾال صؽ أن إمر يهبح حتد ـبر‪-‬‬

‫‪ 6-2‬توّغ بقاشىة مِػ مستَؾ‬

‫تًد هذه افىريَة إحسـ مـ بغ افىرق افثالثة‪ ،‬حٔث َٕقم بٕ٘ناء مِػ مستَؾ حتقي مجٔع‬
‫افتْسَٔات‪ٕ -‬سّٔف مثال ‪ style.CSS‬ثؿ َٕقم باشتدظائف ذم مجٔع صٍحات افقيب ظـ ضريؼ إضاؾة‬
‫افسىر افتايل ذم رأس افهٍحة‪-‬‬
‫>‪<head‬‬
‫"‪<link rel="stylesheet" media="screen" type="text/CSS‬‬
‫>‪title="style" href="style.CSS" /‬‬
‫>‪</head‬‬

‫يتؿ اشتدظاء مِػ افتْسَٔات » ‪ « style.CSS‬ظـ ضريؼ اخلاصٔة ‪ href‬افتل ًٕىٔٓا مسار ادِػ‬

‫‪44‬‬
‫ـامِة أو اشؿ ادِػ ؾحسب ظْد تقاجد مِػ افهٍحة (‪ )xhtml‬ومِػ افتْسٔؼ (‪ )CSS‬ذم ٍٕس‬
‫ادجِد‪.‬‬
‫يت نابف هذه افىريَة مع افثإٔة مـ ٕاحٔة افتُرار‪ ،‬حٔث ٓ ٕحتاج إػ تُرار ٍٕس متٌرات ‪ CSS‬ظذ‬
‫افقشقم (‪ ) xhtml‬مـ ٍٕس افْقع‪ -‬ويتّٔز ظـ افُؾ ظْدما يُقن فديْا أـثر مـ صٍحة حٔث َٕقم‬
‫ب٘ظادة شِسِة مـ افتُرارات ذم افىريَة إول ـل ٕىبؼ ٍٕس افتْسَٔات ظذ ٍٕس افقشقم أما ذم‬
‫افىريَة افثإٔة ؾافتُرار ٓ يُقن مـ ٕاحٔة افقشقم بؾ مـ ٕاحٔة افهٍحات حٔث ِٕجٖ إػ ٕسخ‬
‫وفهؼ مجٔع تْسَٔات افـ ‪ CSS‬ذم رأس ـؾ صٍحة (يًْل تُرار ٍٕس افتْسَٔات ذم مجٔع صٍحات‬
‫ادقؿع)‪ -‬أما بافْسبة فِىريَة افثافثة ؾال ٕحتاج إٓ إػ ٕسخ وفهؼ شىر واحد ؾَط هق شىر اشتدظاء‬
‫ادِػ حٔث ٕستدظل ٍٕس ادِػ إػ ـؾ صٍحات ادقؿع ويتؿ تىبٔؼ افتْسَٔات تَِائٔا‪ -‬ومـ هْا‬
‫يتبغ فْا أن افىريَة افثافثة هل إحسـ وإؾوؾ إذ يَِؾ مـ افقؿت واجلٓد ـام يَِؾ أجوا مـ حجؿ‬
‫ادٍِات‪-‬‬
‫ؿد يسٖل شائال ويَقل‪ 9‬ما افٍائدة مـ افىرق إخرى؟ فذا دظْل أوضح فؽ أنف مل يتؿ اخساع افىرق‬
‫افثالثة ذم آن واحد وإٕام ذم افبداية تؿ اخساع افىريَة إوػ ثؿ افىريَة افثاين إلدراك افًٔقب افتل‬
‫ذـرٕاها ظـ افىريَة إول ومـ ثؿ تؿ اخساع افىريَة افثافثة فٍْس افسبب؛ اشتدراك ظٔقب افىريَة‬
‫افثإٔة‪ -‬ـِام تؿ اخساع ضريَة ـان اخلزاء حيتٍيقن بسابَٓا ـافًادة وهُذا أصبح فديْا ثالثة ضرق‬
‫بّٔزات وظٔقب خمتٍِة‪ -‬يِّؽ ـؾ مهّؿ حرية اختٔار افىريَة افتل يْاشبف‪ ،‬أما ـتجربة صخهٔة‬
‫ؾافىريَة إوػ أـاد ٓ أشتخدمٓا إٓ ٕادرا فتجربة تْسٔؼ ما ؿبؾ أن أؿرر اشتخدامف بْٔام أحٔإا‬
‫أشتخدم افىريَة افثإٔة فتْسٔؼ صٍحة ٓ تتُرر ٍٕس افتْسَٔات ذم أي صٍحة آخر ـتْسٔؼ ّٕقذج‬
‫"اتهؾ بْا" وأخرا أشتخدم افىريَة افثافثة ؾٔام دون ذفؽ‪.‬‬
‫ضريَة إناء مِػ‪9‬‬
‫إن ضريَة إٕناء مِػ ‪ CSS‬تنبف متاما ضريَة إٕناء مِػ ‪ xhtml‬فُـ ظْد احلٍظ ٕختار مـ افَائّة‬
‫حٍظ بامتداد )‪ CSS (notepad++‬أو ُٕتب اشؿ ادِػ مع آمتداد )‪ (style.CSS‬إذا ـْا‬
‫ٕستخدم حمرر ظادي‪ -‬أما ضريَة اشتدظائف إػ داخؾ مِػ ‪ xhtml‬ؾبقاشىة افسىر افذي ذـرٕا شابَا‬
‫أنف يواف داخؾ رأس صٍحة مِػ ‪-xhtml‬‬
‫شٖضِب مْؽ أن أن تَقم بٕ٘ناء مٍِغ أحدمها مِػ صٍحة افقيب » ‪ « index.html‬وافثاين‬

‫‪45‬‬
 9‫ « وشٔحتقي ادٍِغ ظذ إوامر افتايل‬style.CSS » ‫مِػ افتْسَٔات‬
9 « index.html » ‫أوامر مِػ افهٍحة‬
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar"
dir="rtl">
<head>

<title> ‫< ! مرحبا بُؿ ذم مقؿًل اإلفُسوين‬/title>

<meta http-equiv="Content-Type" content="text/html;
charset=windows-1256" />
<link rel="stylesheet" media="screen" type="text/CSS"
title="style" href="style.CSS" />
</head>
<body>

<p> ‫ هذه صٍحة ويب حتتقي ظذ مِػ تْسٔؼ مـ ٕقع‬CSS. </p>

</body>
</html>

9 « style.CSS » ‫أوامر مِػ افتْسٔؼ‬

p {
color: blue;
}

‫ وشٖشتًغ بافنُؾ افتايل ظّال‬،‫بًد إناء ادٍِغ ادستَِغ يستب ظِْٔا أن ذح ؾُرة دجمٓام مًا‬
-‫ افهقرة تٌْل ظـ أخػ ـِّة‬9 ‫بَقهلؿ‬

46
 ‫افنُؾ ‪0-6‬‬

‫ٕالحظ ذم هذه افهقرة وجقد إصُال افثالث افتافٔات‪:‬‬

‫ييٓر ذم افنُؾ إول ـؾ مـ مٍِل افهٍحة )‪ (index.html‬و افتهّٔؿ‬ ‫‪)0‬‬
‫)‪-(style.CSS‬‬
‫وييٓر ذم افنُؾ افثاين مِػ افهٍحة ‪( index.html‬بًد ؾتحف) وبداخِف‬ ‫‪)1‬‬
‫أمر اشتدظاء مِػ افتهّٔؿ ‪9 style.CSS‬‬
‫… "‪<link rel="stylesheet" …href="style.CSS‬‬
‫وأخرا ٕرى أوامر افتهّٔؿ ‪ style.CSS‬ذم افنُؾ افثافث‪ ،‬وهل افتل‬ ‫‪)2‬‬
‫شتَقم بافتزاوج مع أوامر صٍحة افقيب فتًىْٔا ذم افْٓاية صُؾ واحد هق‬
‫ادقؿع اإلفُسوين بّحتقاه ادهّؿ بٌِة ‪ xhtml‬وادْسؼ بٍِّات صٍحات‬
‫إنامط ‪-CSS‬‬

‫‪47‬‬
 ‫إضاؾة تْسٔؼ ‪ CSS‬فقشؿ ‪xhtml‬‬ ‫‪7‬‬

‫ؿبؾ افؼوع ذم إناء أي تْسٔؼ ؾال بد مـ حتديد ثالثة أمقر‪9‬‬

‫‪ -0‬افقشؿ‪ 9‬أي وشؿ افًْك افذي ٕريد تْسَٔف‪ ،‬وفـ ٕؤػ صٔئا جديدا ذم هذا بؾ شْستخدم‬
‫ٍٕس افقشقم افذي شبؼ وحتدثْا ظْف فُـ دون أن ٕوًف ذم افنُؾ <>‪ ،‬ؾّثال إذا أردٕا‬
‫تْسٔؼ ؾَرة ٕص ؾافقشؿ ادستخدم هق ‪ p‬ادجرد وفٔس>‪- <p‬‬

‫‪ -1‬اخلهائص‪ 9‬وهل أوامر ‪ CSS‬افتل شْْسبٓا فِقشؿ فتحديد ٕقع افتْسٔؼ ادراد ـاخلاصٔة‬
‫‪ color‬افتل ختتص بِقن افًْك‪-‬‬

‫‪ -2‬افَّٔة‪ 9‬وهل افَّٔة افتل تٖخذها اخلاصٔة مـ ضّـ ؿٔؿ ـثرة‪ ،‬ؾّثال اخلاصٔة افسابَة‬
‫‪ color‬يُّـ أن تٖخذ ـَّٔة افِقن إزرق أو إمحر أو أي فقن آخر‪ -‬مـ ادُّـ فبًض‬
‫اخلهائص أن تٖخذ أـثر مـ ؿّٔة ـام شْرى ذفؽ ٓحَا‪-‬‬

‫افهٌٔة ادًٔارية فُتابة مِػ ‪9CSS‬‬

‫ذـرٕا أن افهٌٔة ادًٔارية فهٍحة ‪ xhtml‬هل رضورية آفتزام إٓ أهنا ذم بًض احلآت إذا تؿ‬
‫دماهِٓ ا ؾُّٔـ فِهٍحة أن تًّؾ جٔدا بافرؽؿ مـ تِؽ اخلىٖ‪ -‬دظْل أؤـد فؽ مـ افبداية أن إمر‬
‫خمتِػ متاما مع صٌٔة ومًٔار ‪ -CSS‬ؾٖي خىٖ ذم ادًٔار مٓام ـان بسٔىا شٔٗدي إػ دماهؾ ادتهٍح‬
‫جلّٔع افتْسَٔات مـ مُان اخلىٖ إػ هناية ادِػ‪ -‬وشتيٓر ٕتائج تِؽ اخلىٖ جِٔة ظذ ادتهٍح ٓ‬
‫شٔام إذا ـان مقضع اخلىٖ يتًِؼ بٖشِقب تَسٔؿ افهٍحة‪-‬‬

‫افنُؾ افتايل يقضح افهٌٔة ادًٔارية فُتابة مِػ ‪9CSS‬‬

‫‪48‬‬
 ‫ٕالحظ ذم هذا افنُؾ وجقد آشؿ ‪ selector‬وهق يّثؾ‬
‫افقشؿ ادراد تْسَٔف (‪ p‬مثال) أما ‪ property‬ؾتّثؾ خاصٔة‬
‫افتْسٔؼ ادراد إضاؾتف فِقشؿ (‪ color‬مثال) أما ‪ value‬ؾتّثؾ‬
‫ؿّٔة اخلاصٔة وافتل يُّـ أن تُقن ‪ red‬ذم حال اخلاصٔة‬
‫‪-color‬‬

‫وـذفؽ ٕالحظ أنف يُّـ إضاؾة أـثر مـ تْسٔؼ ظذ افقشؿ‬

‫افقاحد‪ ،‬ؾَط َٕقم بافٍهؾ بغ افتْسَٔات بٍاصِة مَْقضة ـام‬
‫َٕقم بجّع خهائص تْسٔؼ افقشؿ افقاحد بغ ؿقشغ‪ ،‬وؾٔام‬
‫يع مثال يقضح تٌٔر فقن وحجؿ ؾَرة ٕص‪-‬‬

‫أوامر ‪9xhtml‬‬
‫>‪<body‬‬

‫>‪</em></h1‬افربٔع افًريب>‪<h1><em‬‬

‫>‪<p‬‬ ‫بيٓقر هتاف >‪ </em‬افربٔع افًريب >‪ <em‬متٔزت افثقرات افًربٔة افتل حهِت أثْاء‬
‫صٓرا ذم ـؾ افدول افًربٔة وهق‬
‫ً‬ ‫ظريب أصبح‬
‫‪ّ :‬‬
‫>‪<q‬‬ ‫>‪. </q‬افنًب يريد إشَاط افْيام‬
‫>‪</p‬‬
‫>‪</body‬‬

‫تْسٔؼ ‪9CSS‬‬
‫{ ‪h1‬‬
‫;‪text-align: center‬‬
‫}‬

‫أطـ أوامر افهٍحة ٓ حتتاج إػ ذح‪ -‬أما افتْسٔؼ ؾٓق بسٔط جدا‪ 9‬أوٓ ؿّْا بتحديد افقشؿ افذي‬
‫هندؾف وهق ‪ ، h1‬ؾتحْا بًدها افَقشغ اشتًدادا إلضاؾة افتْسَٔات‪ -‬وؿد أضٍْا تْسٔؼ واحد ؾَط‬
‫باشتخدام اخلاصٔة ‪ text-align‬وافتل ختتص بقطٍٔة حتديد جٓة افْص وؿّٔتٓا هْا ‪ center‬أي‬
‫افتقشٔط‪ -‬ويٍهؾ بغ اخلاصٔة وؿّٔتٓا َٕىتغ ؾقق بًوٓام افبًض وأخرا ختّْا بٍاصِة مَْقضة‪-‬‬

‫‪5/‬‬
 ‫افْتٔجة‪9‬‬

‫افنُؾ ‪0-7‬‬

‫‪ 7-0‬إضاؾة تْسٔؼ مقحد ٕـثر مـ وشؿ‬

‫ذم ادثال افسابؼ ؿّْا بتقشٔط افًْقان (‪ )h1‬دون افٍَرة (‪ ،)p‬وؿد ـان مـ ادُّـ تقشٔط افًْكيـ‬
‫مًا ظـ ضريؼ تُرار ٍٕس افتْسٔؼ افسابؼ مع اشتٓداف افٍَرة ذم ادرة افثإٔة ـام يع‪-‬‬
‫{ ‪h1‬‬
‫;‪text-align: center‬‬
‫}‬
‫{ ‪p‬‬
‫;‪text-align: center‬‬
‫}‬

‫إذا ؿّْا بتجربة هذا ادثال ظذ ادتهٍح ؾسٔيٓر ـؾ مـ افًْقان ‪ h1‬و افٍَرة ‪ p‬ذم وشط افهٍحة‬
‫فُـ هْاك ضريَة ٓختهار هذه إوامر مع اإلبَاء ظذ ٍٕس افْتٔجة وهل أن َٕقم بُتابة افقشقم‬
‫ادراد تْسَٔٓا مع افٍهؾ بْٔٓا بٍاصِة ثؿ ُٕتب اخلهائص وؿّٔٓا متاما ـام يع‪9‬‬
‫{ ‪h1, p‬‬

‫‪50‬‬
 ‫;‪text-align: center‬‬
‫}‬

‫شُٔقن ٕتٔجة هذا افتْسٔؼ منابف متاما فِتْسٔؼ افسابؼ‪ ،‬وهق تقشٔط ـؾ مـ افًْقان ‪ h1‬وافٍَرة ‪-p‬‬

‫اشتٓداف ظْك بداخؾ ظْك آخر‪9‬‬

‫افٍُرة هل ـٔػ َٕقم باشتٓداف ظْك متقاجد داخؾ ظْك آخر ودون افتٖثر ظذ افًْاس ادناهبة‬
‫افتل ٓ تتقاجد مًٓا داخؾ افًْك ادًْل‪ -‬مثال ؿد ورد ظْكيـ ‪ strong‬ذم ادثال إخر مـ ٕقع‬
‫‪ xhtml‬أحدمها داخؾ افًْقان وأخر داخؾ افٍَرة‪ ،‬ؾاهلدف هق ـٔػ َٕقم بتٌٔر فقن افًْك‬
‫‪ strong‬افتل بداخؾ افٍَرة دون افتٖثر ظذ تِؽ افتل بداخؾ افًْقان ؟‬

‫دظْا أوٓ أن َٕقم بتىبٔؼ افتْسٔؼ ادراد ظذ افًْك ‪ strong‬مباذة ـام يع‪9‬‬
‫{ ‪strong‬‬
‫;‪color: blue‬‬
‫}‬

‫بافىبع شٔنّؾ هذا افتْسٔؼ مجٔع افًْاس ‪ strong‬ادقجقدة ذم افهٍحة‪ -‬أما ٓشتٓداف افًْك‬
‫‪ strong‬ادقجقدة داخؾ افٍَرة ؾَط ُٕتب افقشؿ ‪ p‬مساؾة ثؿ ‪ strong‬ـام يع‪9‬‬
‫{ ‪p strong‬‬
‫;‪color: blue‬‬
‫}‬

‫تًْل هذه افُتابة‪ « p strong » 9‬تىبٔؼ افتْسَٔات ظذ مجٔع افًْاس ‪ strong‬ادقجقدة داخؾ أي‬
‫ظْك ‪-p‬‬

‫وجيب ظدم آصُال بغ افُتابتغ » ‪ « p, strong‬و » ‪ « p strong‬ؾافُتابة إوػ مع افٍاصِة‬

‫تًْل تىبٔؼ افتْسٔؼ ظذ مجٔع افًْاس بْٔام افُتابة افثإٔة بدون ؾاصِة تًْل تىبٔؼ افتْسٔؼ ظذ‬
‫افًْك أؿل افّٔغ ذيىة يُقن داخؾ افًْك افتل بٔساره‪ -‬و تًْل هذه أن افقشؿ ‪ strong‬هق ابـ‬
‫فِقشؿ ‪ p‬ـقٕف متقاجد داخِف (>‪- )<p><strong></strong></p‬‬

‫بًض إمثِة‪9‬‬

‫}{‪ 9 p, strong, em‬تىبٔؼ افتْسٔؼ ظذ ـؾ افًْاس مـ ٕقع ‪ p‬و ‪ strong‬و ‪- em‬‬

‫‪51‬‬
‫}{‪ 9 p strong em‬تىبٔؼ افتْسٔؼ ظذ ـؾ افًْاس مـ ‪ em‬ذيىة أن تُقن داخؾ ظْك ‪strong‬‬
‫مقجقدة بدورها داخؾ ظْك ‪-p‬‬

‫‪ 7-1‬اخلاصٔتان ‪ id‬و ‪class‬‬

‫ـؾ ما حدثتؽ ظـ فٌة ‪ CSS‬حتك أن فٔس إٓ جمرد مدخؾ فٍٓؿ ـٍٔٔة ظِّٓا‪ -‬وؿد رأجْا مثال أن‬
‫اشتخدام افتْسٔؼ افتايل‪ p{color: blue;} 9‬تَقم بتِقيـ مجٔع افٍَرات ‪ p‬ادقجقدة ذم افهٍحة‬
‫بافِقن إزرق‪ -‬هذا إمر ظام جلّٔع افقشقم‪ ،‬حٔث أن ـؾ تْسٔؼ اشتٓدف بف أي وشؿ‪ ،‬ؾاحلََٔة أن‬
‫ادستٓدف هل مجٔع افًْاس ذات ٍٕس افقشؿ‪ -‬ؾِق اشتٓدؾت افقشؿ ‪ p‬تُقن ادستٓدؾة هل مجٔع‬
‫افٍَرات افتل بافهٍحة وفق اشتٓدؾت افقشؿ ‪ strong‬تُقن ادستٓدؾة هل مجٔع افْهقص افتل‬
‫بداخؾ أي وشؿ ‪ strong‬ذم افهٍحة‪ -‬فُـ مـ افْادر جدا ذم افقاؿع افًّع أن َٕقم ب٘ضاؾة‬
‫افتْسَٔات هبذا إشِقب‪ ،‬فذا مـ افرضوري أن ٕستىٔع اشتٓداف بًض افقشقم دون إخرى‪-‬‬

‫وـذفؽ رأجْا ذم افٍَرة افسابَة ـٔػ أنف مـ ادُّـ اشتٓداف وشقم بداخؾ أخرى فتىبٔؼ تْسٔؼ‬
‫ظِٔٓا دون افتٖثر بافقشؿ إب‪ -‬بافرؽؿ مـ ـقن هذا آشتٓداف مٍٔد جدا‪ ،‬ؾٓق حمدود ٕقظا ما‬
‫ؾًْدما َٕقم باشتٓداف افقشؿ ‪ strong‬داخؾ مجٔع افٍَرات ‪ p‬مثال‪ -‬ؾَد يْنٖ فديْا جمّقظة ـبرة مـ‬
‫ٕقع افقشؿ ‪ strong‬ادتقاجدة داخؾ افٍَرات‪ ،‬ؾامذا فق أردٕا ؾَط اشتٓداف بًض مْٓا وفٔس افُؾ ؟‬
‫هذا ما يتٔحف فْا اخلاصٔتغ ‪ id‬و ‪ class‬حٔث ٕستخدمٓام متاما بٍْس إشِقب افذي ٕستخدم‬
‫اخلهائص ذم صٍحات ‪-xhtml‬‬
‫>‪<body‬‬

‫>"‪<h1 id="logo‬‬ ‫>‪</h1‬هذا حمتقى ٕيص‬

‫>"‪<p class="pOne‬‬ ‫>‪</p‬هذا حمتقى ٕيص‬

‫>‪</body‬‬

‫إن ؿّٔة اخلاصٔتان ‪ class‬و ‪ id‬تُقن مـ اختٔار ادهّؿ بحٔث يُّـ اختٔار أي اشؿ ـان ذيىة‬
‫ظدم ابتدائف برؿؿ ذم حال اخلاصٔة ‪( id‬يًْل مـ اخلىٖ أن ُٕتب "‪ id= "2name‬وافهقاب هق‬
‫"‪ )id= "name1‬أما مع اخلاصٔة ‪ class‬ؾال مإع مـ ابتداء آشؿ برؿؿ‪ -‬ـذفؽ جيب أن ًِٕؿ أنف‬
‫يُّـ اشتخدام ٍٕس آشؿ أـثر مـ مرة مع اخلاصٔة ‪ class‬بحٔث ـؾ وشؿ يواف فف تِؽ اخلاصٔة‬

‫‪52‬‬
‫شٖٔخذ مجٔع افتْسَٔات افتل شتواف فف أما مع اخلاصٔة ‪ id‬ؾال جيقز اشتخدام ٍٕس آشؿ مع أـثر‬
‫مـ مرة واحدة‪ -‬وباظتبار هذا افؼط ؾْٕ٘ا ٕستخدم اخلاصٔة ‪ class‬مع افًْاس افتل تتُرر أـثر مـ‬
‫مرة ذم ٍٕس افهٍحة‪ ،‬بْٔام ٕستخدم اخلاصٔة ‪ id‬مع افًْاس افتل ٓ تتُرر إٓ مرة واحدة ذم ـؾ‬
‫صٍحة ـنًار ادقؿع ظذ شبٔؾ ادثال‪-‬‬

‫وأن بًد أن ظرؾْا ـٔػ َٕقم بتجٓٔز افًْك ادراد تْسَٔف ذم مِػ ‪ ،xhtml‬مل يبؼ إٓ أن ٕرى ـٔػ‬
‫َٕقم بتىبٔؼ افتْسَٔات ظِٔف مـ خالل ‪ ،CSS‬وفٍْسض أنْا ٕريد تِقيـ افًْقان ‪ h1‬بافِقن ٕزرق‬
‫وتُبر حجؿ ٕص افٍَرة ‪ p‬ذم ادثال افسابؼ ؾْٕ٘ا َٕقم بافتايل‪9‬‬

‫إذا ـان اخلاصٔة ادستخدمة ‪ id‬ـام هل احلافة مع افًْقان ( "‪ ) id="logo‬ؾْستخدم‬ ‫‪‬‬
‫ؿّٔتٓا مسبقؿا برمز ادربع ـٓدف فِتْسٔؼ ثؿ ٕتابع اخلىقات افتافٔة ـافًادة‪-‬‬

‫}; ‪#logo { color: blue‬‬

‫أما إذا ـان اخلاصٔة ادستخدمة ‪ class‬ؾَْقم بٍْس اخلىقات مع وضع َٕىة ماــ رمز‬ ‫‪‬‬
‫ادربع ـام يع‪9‬‬

‫}; ‪.pOne { fontsize: 18px‬‬

‫وأخرا إذا ؿّْا ب٘ظادة ـتابة هذه افتْسَٔات بنُؾ مرتب شُٔقن ـام يع‪9‬‬
‫{ ‪#logo‬‬
‫;‪color: blue‬‬
‫}‬
‫{ ‪.pOne‬‬
‫;‪fontsize: 18px‬‬
‫}‬

‫‪53‬‬
 ‫مٍٓقم افتجّٔع وافتخهٔص‬ ‫‪8‬‬

‫رأجْا ذم افٍَرة افسابَة ـٔػ يتؿ اشتخدام ‪ id‬أو ‪ class‬فتخهٔص ظْك ما اشتًدادا إلظادة تْسَٔف‬
‫دون افتٖثر بافًْاس ادنابف فف ؾِق ـان فديْا ثالث ؾَرات ٕص مثال وتؿ تْسٔؼ واحدة مْٓا ظز‬
‫اخلاصٔة ‪ class‬وفٍْرض ("‪ )class="pOne‬بحٔث أظىْٔاه افتْسٔؼ افتايل‪:‬‬
‫{ ‪#pOne‬‬
‫;‪color: blue‬‬
‫}‬

‫شتيٓر افٍَرة إوػ ‪ ,‬ادخهص باخلاصٔة ‪ , class‬بافِقن إزرق بْٔام افٍَرتان أخرتان‬
‫شتيٓران بافِقن آؾسايض وهق إشقد‪ -‬فُـ ماذا فق أردٕا ختهٔص ؾَط جزء مـ افٍَرة إوػ‬
‫فٔيٓر بإزرق وفٔست افٍَرة ـِٓا ؟ أو ماذا فق أردٕا أن ٕجًؾ فقن خٍِٔة افٍَرتغ افثإٔة وافثافثة‬
‫أمحر؟‬

‫هْا يزز ؾاظِٔة افقشّغ ‪ span‬و ‪ div‬حٔث ٕستىٔع بقاشىة ‪ span‬أن ٕخهص جزء مـ افْص‬
‫داخؾ افًْك وَٕقم بتٌٔر تْسَٔف دون افتٖثر ظذ باؿل افًْك ـام يُّْْا مجع ظْكيـ أو أـثر‬
‫بقاشىة افقشؿ ‪ div‬ثؿ َٕقم بافتًامؾ مع افُؾ ظذ أهنا ظْك واحد‪.‬‬

‫وٓبد أن ًِٕؿ أن ‪ span‬هق وشؿ داخع وبافتايل دائام ما يُقن داخؾ افًْك ادراد ختهٔص جزء مْف‬
‫وٓ يُّـ بٖي حال مـ إحقال أن يقضع بحد ذاتف دون أن يُقن داخؾ ظْك مـ افْقع اخلارجل‪،‬‬
‫أما ‪ div‬ؾٓق بافًُس وشؿ خارجل حئط بافًْاس ادراد دمًّٔٓا مع بًوٓا‪-‬‬

‫وأخرا جيب أن ًٕرف َّ‬

‫أن وطٍٔة ـؾ مـ اخلاصٔتغ ‪ id‬و ‪ class‬وـذفؽ افقشّغ ‪ span‬و ‪ div‬هل‬
‫إجياد مسّك ٕستًغ بف فتْسٔؼ افًْاس باشتخدام ‪ CSS‬أما مـ ٕاحٔة صٍحة افقيب ‪ xhtml‬ؾ٘هنا ٓ‬
‫تؤػ أي رء جديد ظذ افْتائج افياهر فِّستخدم ‪-‬‬

‫ـٍٔٔة تىبٔؼ افقشؿ ‪9span‬‬

‫يتؿ تىبٔؼ افقشؿ ‪ span‬ـٖي وشؿ آخر مـ وشقم ‪ xhtml‬مع إضاؾة خاصٔة إما ‪ id‬أو ‪ class‬ؿّٔتٓا‬
‫هق آشؿ افذي شْستخدمف ذم مِػ ‪ CSS‬فتىبٔؼ افتْسٔؼ‪ ،‬ويْبٌل احلرص ظذ أن يُقن اجلزء‬

‫‪54‬‬
‫ادراد ختهٔهف بغ وشّل آؾتتاح >‪ <span‬و اإلؽالق >‪ </span‬ؾٍل ادثال افتايل مثال شٔتؿ‬
‫ختهٔص افْص بغ‪ <span></span>:‬أي (جقن بالتر‪):‬‬
‫>‪<body‬‬

‫>‪<p‬‬ ‫متٔزت افثقرات افًربٔة بيٓقر هتاف وصًار‬

‫>"‪<span class="slogan‬‬ ‫>‪ </span‬افنًب يريد إشَاط افْيام‬

‫صٓرا ؾٔام بًد وتؿ رؾًٓا ذم ـؾ افثقرات افتل حدثت ذم افدول افًربٔة‬
‫ً‬ ‫وؿد أصبح‬
‫>‪</p‬‬
‫>‪</body‬‬

‫وأن بًدما تؿ دمٓٔز افْص ذم مِػ ‪ xhtml‬ؾْستىٔع تىبٔؼ تْسٔؼ ‪ CSS‬ظِٔف ـام ذم ادثال افتايل‪9‬‬
‫{ ‪.slogan‬‬
‫;‪Color: blue‬‬
‫}‬

‫شٔيٓر صًار » افنًب يريد إشَاط افْيام « بافِقن إزرق ٕتٔجة هلذا افتىبٔؼ‪-‬‬

‫ـٍٔٔة تىبٔؼ افقشؿ ‪div‬‬

‫خيتِػ افقشؿ ‪ div‬ظـ ‪ span‬أنف حئط بافًْك مـ اخلارج بْٔام ‪ span‬يَقم بافتخهٔص مـ افداخؾ‬
‫أما ظـ ـٍٔٔة ظّؾ افتىبٔؼ ؾإمر شٔان حٔث ٕؤػ ظِٔٓا إحدى اخلاصٔتغ ‪ id‬أو ‪ class‬ثؿ‬
‫ٕحرص ظذ أن يُقن مجٔع افًْاس ادراد مجًٓا مع بًوٓا افبًض داخؾ ‪ div‬ـام يبْٔف ادثال افتايل‪9‬‬
‫>‪<body‬‬

‫>"‪<h1 id="logo‬‬ ‫>‪</h1‬هذا حمتقى ٕيص‬

‫>"‪<p class="pOne‬‬ ‫>‪</p‬حمتقى افٍَرة إوػ‬

‫>"‪<div id="pTwoThree‬‬

‫>"‪<p class="pTwo‬‬ ‫>‪</p‬حمتقى افٍَرة افثإٔة‬

‫>"‪<p class="pThree‬‬ ‫>‪</p‬حمتقى افٍَرة افثافثة‬

‫>‪</div‬‬
‫>‪</body‬‬

‫‪55‬‬
 ‫تْسٔؼ ‪9CSS‬‬
‫{ ‪#pTwoThree‬‬
‫;‪Background-color: red‬‬
‫}‬

‫شٔتؿ تٍْٔذ هذا افتىبٔؼ (اضاؾة خٍِٔة محراء) ظذ مجٔع افًْاس افتل بداخؾ افقشؿ ‪( div‬افٍَرة‬
‫افثإٔة وافثافثة)‪-‬‬

‫افنُؾ ‪0-8‬‬

‫ٕالحظ ـٔػ أن افًْقان وافٍَرة إوػ ييٓران بافتْسٔؼ افًادي بْٔام تيٓر افٍَرة افثإٔة وافثافثة‬
‫بخٍِٔة أمحر‪ -‬وؿد يَقل ؿائؾ أن مـ ادُّـ اجراء ٍٕس افتْسٔؼ باشتخدام خاصٔة ‪ class‬بحٔث‬
‫ٕستخدم ٍٕس آشؿ فٍَِرتغ وهذا صحٔح متاما‪ -‬فُـ جيب إٓتباه أن ـؾ ؾَرة تبدأ حتت افسىر‬
‫بًّْك أهنا ـِام أضٍْا ؾَرة جديدة ؾستٍْهؾ ظـ شابَٓا بَّدار شىر واحد فذا ؾ٘ن تىبٔؼ افتْسٔؼ‬
‫افسابؼ باشتخدام خاصٔة ‪ class‬تًْل بَاء إشىر افتل تٍهؾ بغ افٍَرات بٔواء متاما ظذ حاهلا‬
‫آؾسايض فُقهنا خارج افٍَرات وفٔست مْٓا‪-‬‬

‫‪56‬‬
 ‫تْسٔؼ افْهقص‬ ‫‪0/‬‬

‫‪ 0/-0‬حجؿ وٕقع اخلط‬

‫احلجؿ‬

‫ظْد ـتابة ٕص ذم صٍحة افقيب يتؿ إطٓارها تَِائٔا بحجؿ يَارب ‪ 05‬بُسؾ‪ ،‬ومـ ادُّـ فِّهّؿ‬
‫أن يَقم بتٌرها إػ احلجؿ ادْاشب فف وذفؽ باشتخدام إحدى افىرق إربًة ادتقؾرة ذم فٌة ‪9CSS‬‬

‫‪ -0‬إحجام افَٔاشٔة‬

‫ذم احلََٔة فٔس هذا بّهىِح متٍؼ ظِٔف بؾ جمرد تسّٔة مْل ـقن هل أحجام مدروشة بدؿة مـ ؿبؾ‬
‫خزاء فتْاشب ـاؾة آحتٔاجات‪ -‬ذم هذه افىريَة يتؿ حتديد ؿّٔة احلجؿ باشتخدام مهىِحات ظادية‬
‫تنبف مهىِحات أحجام ادالبس بافٌِة إُِٓٔزية‪ -‬وٕستخدم اخلاصٔة ‪ font-size‬فِتًريػ أنْا‬
‫ظذ وصؽ تٌٔر حجؿ افْص أما ظـ افَٔؿ ؾتُقن ـام يع‪9‬‬

‫‪ 9 xx-small ‬أصٌر‬

‫‪ 9 x-small ‬صٌر جدا‬

‫‪ 9 Small‬صٌر‬ ‫‪‬‬

‫‪ 9 Medium ‬حجؿ متقشط‬

‫‪ 9 Large ‬ـبر‬

‫‪ 9 x-large ‬ـبر جدا‬

‫‪ 9xx-large ‬أـز ظّالق‬

‫مثال صامؾ فْتٔجة هذه افَٔؿ‪-‬‬

‫مِػ ‪9xhtml‬‬

‫‪57‬‬
<body>

<p class="xxsmall">‫ اديٓر افْٓائل فَِّٔة‬xx-small</p>

<p class="xsmall"> ‫ اديٓر افْٓائل فَِّٔة‬x-small</p>

<p class="small">‫ اديٓر افْٓائل فَِّٔة‬small</p>

<p class="medium">‫ اديٓر افْٓائل فَِّٔة‬medium</p>

<p class="large">‫ اديٓر افْٓائل فَِّٔة‬large</p>

<p class="xlarge">‫ اديٓر افْٓائل فَِّٔة‬x-large</p>

<p class="xxlarge">‫ اديٓر افْٓائل فَِّٔة‬xx-large</p>

</body>

9CSS ‫مِػ‬
.xxsmall {
font-size: xx-small;
}
.xsmall {
font-size: x-small;
}
.small {
font-size: small;
}
.medium {
font-size: medium;
}
.large {
font-size: large;
}
.xlarge {
font-size: x-large;
}
.xxlarge {
font-size: xx-large;

58
‫}‬

‫افْتٔجة‪9‬‬

‫افنُؾ ‪0-0/‬‬

‫‪ -1‬وحدة افَٔاس بُسؾ‬

‫ذم هذه افى ريَة يتؿ حتديد حجؿ افْص بٖرؿام ظادية تَاس حسب وحدة افَٔاس بُسؾ‪ -‬وؿد شبؼ‬
‫وذـرٕا أن احلجؿ آؾسايض فِْص هق ‪ 05‬بُسؾ فذا فـ يُقن مـ افهًب ظِٔؽ افتْبٗ بَّدار‬
‫حجؿ اخلط ادْاشب دقؿًؽ‪ ،‬ؾاحلد إوشط شُٔقن مـ ‪ 05‬إػ ‪ 1/‬فِْهقص و مـ ‪ 1/‬إػ ‪2/‬‬
‫فًِْاويـ‪ -‬و يُّْؽ افزيادة ظذ ذفؽ واختٔار احلجؿ افتل ترؽب بف وشَٔقم ادتهٍح بتىبٔؼ ما متع‬
‫ظِٔف دون زيادة وٓ َٕهان‪ -‬وأن فْستًرض مثآ ظـ هذه افىريَة‪9‬‬

‫مِػ ‪9xhtml‬‬

‫>‪<body‬‬
‫>‪</h3‬ضامن افْجاح>‪<h3‬‬

‫>‪</p‬فُل توّـ ٕجاحؽ‪ ،‬تكف ـٖن افٍنؾ مـ ادستحٔالت‪<p>.‬‬

‫>‪</body‬‬

‫‪6/‬‬
 ‫مِػ ‪9CSS‬‬
‫{ ‪h3‬‬
‫;‪font-size: 30px‬‬
‫}‬
‫{ ‪p‬‬
‫;‪font-size: 18px‬‬
‫}‬

‫افْتٔجة‪9‬‬

‫افنُؾ ‪1-0/‬‬

‫‪ -2‬افتًريػ بقحدة افَٔاس ‪em‬‬

‫هذه افىريَة تنبف متاما افىريَة افسابَة إٓ أن وحدة افَٔاس هذه ادرة (‪ )em‬تٖخذ أرؿام ظؼية‬
‫ظُس ‪ px‬وذفؽ بسبب أحجامٓا افُبرة إذ افَّٔة ‪ em0‬تًد حجؿ ـبر أما احلجؿ ادتقشط ؾٓق‬
‫‪ em /.6‬بْٔام ‪ em 1‬شٔبدو ظّالق جدا‪ -‬ويُّْؽ دمربة هذه افقحدة باشتخدام ٍٕس ادثال افسابؼ‪-‬‬

‫‪ -3‬افتًريػ بافْسبة ادئقية‬

‫مـ افسٓؾ جدا افتًامؾ مع هذه افىريَة حٔث افْسٔة ‪ %0//‬تقازي احلجؿ آؾسايض (أي ما يقازي‬
‫‪ )px05‬وإذا أردٕا تُبر افْص ٕزيد افْسبة مثال (‪ )%04/‬أو َْٕهٓا فتَِٔؾ احلجؿ مثال (‪-)%7/‬‬
‫ويُّْؽ دمربة هذه افقحدة أجوا باشتخدام ٍٕس ادثال افسابؼ‪-‬‬

‫ٕقع اخلط‬

‫‪60‬‬
‫مـ ادٗـد أن حجؿ اخلط يرتبط بْقظف ارتباضا وثَٔا فذا جيب احلذر ظْد اختٔار ـال مـ ٕقع اخلط‬
‫وحجّف‪ ،‬فٔس هذا ؾحسب بؾ ٕقع اخلط افذي يتؿ اختٔاره ٓ بد أن يُقن متقؾرا ظذ حاشقب افزائر‬
‫وإٓ فـ يتًرف ظِٔف ادتهٍح هلذا أجوا يْهح ظْد اختٔار ٕقع اخلط أن ٕحرص ظذ اختٔار اخلىقط‬
‫افتل يتؿ تثبٔتٓا مع ٕيام افقيْدوز حتك ٕتجْب دماهؾ ادتهٍح فِخط ادختار فًدم تقؾره ذم حاشقب‬
‫افزائر‪.‬‬

‫ٕستخدم اخلاصٔة ‪ font-familly‬فتحديد ٕقع اخلط أما ؿّٔٓا ؾٖشامء اخلىقط ظذ شبٔؾ ادثال‪9‬‬

‫‪-‬‬ ‫‪Arial‬‬

‫‪-‬‬ ‫‪Arial Black‬‬

‫‪-‬‬ ‫‪Comic Sans MS‬‬

‫‪-‬‬ ‫‪Courier New‬‬

‫‪-‬‬ ‫‪Georgia‬‬

‫‪-‬‬ ‫‪Impact‬‬

‫‪-‬‬ ‫‪Times New Roman‬‬

‫‪-‬‬ ‫‪Trebuchet MS‬‬

‫‪-‬‬ ‫‪Verdana‬‬

‫هذه بًض افْامذج ظـ أنقاع اخلىقط افتل يتؿ تثبٔتٓا تَِائٔا مع أنيّة ويْدوز مـ ذـة‬
‫مايُروشقؾت‪ -‬ويُّـ افًقدة إػ ادجِد ‪ font‬ادقجقد ظذ فقحة افتحُؿ فالضالع ظذ ادزيد مـ‬
‫أشامء اخلىقط أو حتك ؾتح برٕامج مُٔروشقؾت وورد افذي شٔسّح فؽ بتجربة بًض اخلىقط ؿبؾ‬
‫اشتخدامٓا‪.‬‬

‫مـ ادُّـ حتديد أـثر مـ خط واحد بحٔث يُقن إوفقية فِخط إول ؾ٘ن مل جيده ادتهٍح ظذ‬
‫حاشقب افزائر يٖيت فِخط افثاين وإٓ ؾاخلط افثافث وهُذا‪.‬‬

‫‪61‬‬
‫ويستحسـ ؾًؾ ذفؽ ؾبٓذا شٔستبًد وؿقع منُِة ظدم تقؾر اخلط ذم جٓاز افزائر ـام ويستحسـ‬
‫إضاؾة ـِّة ‪ sans-serif‬آخر ؿائّة اخلىقط ادختارة إذ تًْل هذه افُِّة‪ 9‬ؿٔام ادتهٍح باختٔار‬
‫خط مـ اخلىقط افَٔاشٔة ادتقؾرة ظذ جٓاز افزائر ذم حال مل يتًرف ظذ أي خط مـ اخلىقط‬
‫ادختارة‪ -‬ويًقد هذا إمر بٍائدة ـبرة جدا ظْدما يّتِؽ افزائر ٕيام ويْدوز ؿديؿ أو أي ٕيام آخر ٓ‬
‫يتقؾر ظْده اخلىقط ادحددة‪ ،‬إذ يَقم ادتهٍح باختٔار خط مْاشب ضّـ مٍِات خىقط ٕيام‬
‫حاشقب افزائر‪.‬‬

‫ٓختٔار أـثر مـ خط يتؿ افٍهؾ بغ اخلىقط بٍاصِة مع وضع اخلط بغ ظالمتل تْهٔص ظْدما‬
‫يتُقن اخلط مـ ـِّتغ مٍْهِتغ ـام يع‪9‬‬

‫; ‪font-family: "Arial Black", Arial, Verdana, sans-serif‬‬

‫وؾٔام يع تًديؾ تْسٔؼ ادثال إخر‪ 9‬حتديد ٕقع اخلط‪9‬‬

‫{ ‪h3‬‬
‫;‪font-size: 30px‬‬
‫‪font-family:‬‬ ‫‪tahoma, Arial, "Arial Black",‬‬ ‫‪sans-‬‬
‫;‪serif‬‬
‫}‬
‫{ ‪p‬‬
‫;‪font-size: 18px‬‬
‫‪font-family: "Courier New", "Comic Sans MS", sans-‬‬
‫;‪serif‬‬
‫}‬

‫افنُؾ ‪2-0/‬‬

‫‪62‬‬
 ‫‪ 0/-1‬ادحاذاة وآزاحة‬

‫‪ 0/-1-0‬ادحاذاة‬

‫يَهد ب ادحاذاة اجلٓة افتل شٔيٓر ؾٔٓا افْص إذا ما ـإت افّٔغ‪ ،‬افقشط‪ ،‬افٔسار أو ضبط افْص‬
‫فتْاشب ادساحة ادتقؾرة‪ -‬ويُّْْا حتديد جٓة طٓقر افْص باشتخدام اخلاصٔة ‪ text-align‬افتل‬
‫تٖخذ افَٔؿ افتافٔة‪9‬‬

‫‪ 9 left ‬إطٓار افْص جٓة افٔسار‬

‫‪ 9 Center ‬تقشٔط افْص‬

‫‪ 9 right ‬إطٓار افْص جٓة افّٔغ‬

‫‪ 9 Justify ‬ضبط افْص فتْاشب ادساحة ادتقؾرة‬

‫>‪<body‬‬

‫>‪ I have a dream</h2‬فدي حِؿ>‪<h2‬‬

‫>‪:</p‬مـ خىاب مارتـ فقثر ـْٔج ذم افـ ‪ 28‬مـ أؽسىس ظام ‪<p>1963‬‬

‫>‪<blockquote‬‬

‫احلََٔل ‪ٕٗ 9‬مـ >‪<p‬‬

‫ّ‬ ‫فدي حِؿ أنف ذم يقم مـ إجام شتْٓض هذه إ ّمة فتًٔش مًًْك ظَٔدهتا‬
‫ّ‬
‫افرجال ُخِِ َُقا متساويـ‪ّ --‬‬
‫فدي حِؿ أنف ذم يقم مـ إجام وظذ تالل جقرجٔا‬ ‫ـؾ ّ‬‫أن ّ‬
‫هبذه احلََٔة‪ّ 9‬‬
‫احلّراء شُٔقن أبْاء افًبٔد و أبْاء مالك افًبٔد افسابَغ ؿادريـ ظذ اجلِقس مًا ظذ مائدة إخاء‪--‬‬
‫فدي حِؿ أنف ذم يقم مـ إجام أنف ح ّتك مٔسٔسبل افتل تته ّبب ظر ًؿا مـ حرارة افيِؿ وآضىٓاد‬
‫فدي حِؿ ّ‬
‫أن أضٍايل إربًة شقف ئًنقن ذم يقم مـ إجام ذم‬ ‫حر ّية وظدافة‪ّ --‬‬
‫شتت َُح َّقل إػ واحة ّ‬
‫فدي افٔقم حِؿ‬
‫>‪. </p‬دوفة فـ تًامِٓؿ بِقن جِدهؿ فُ ّـ بّحتقيات صخه ّٔتٓؿ‪ّ --‬‬
‫>‪</blockquote‬‬
‫>‪</p‬مارتـ فقثر ـْٔج>"‪<p class="by‬‬

‫>‪</body‬‬

‫ٕتٔجة افهٍحة مـ دون تْسَٔات ‪-CSS‬‬

‫‪63‬‬
 3-0/ ‫افنُؾ‬

9CSS ‫مِػ‬
h2 {
text-align: center;
font-family: tahoma, "Arial Black",sans-serif;
}
blockquote {
text-align: justify;
font-family: "Courier New", Arial, sans-serif;
}
.by {
text-align: left;
font-size: 120%;
}

64
 ‫افنُؾ ‪4-0/‬‬

‫إتبف ٓ يُّـ حتديد جٓة افْص بافْسبة فِقشقم افداخِٔة ــ ‪ span‬أو ‪ b‬ؾٓل تٖخذ جٓة افقشؿ‬
‫اخلارجل فف ‪p‬‬

‫‪ 0/-1-1‬آزاحة‬

‫إذا ٓحيت ذم ادثال افسابؼ ؾَد اشتخدٕا ذم اؿتباس خىاب مارتـ فقثر ـْٔج وشؿ آؿتباس‬
‫>‪<blockquote/> <blockquote‬وؿد ؿِْا أن افقشؿ ‪ blockquote‬يزاح حمتقاه ٕحق جٓة‬
‫افٔسار إذا ـان ادماه افْص مـ افّٔغ إػ افٔسار وافًُس بافًُس إذا ـان جٓة افْص مـ افٔسار إػ‬
‫افّٔغ ؾٔتؿ تى بٔؼ اإلزاحة ٕحق افّٔغ‪ -‬ـؾ هذا شبؼ وحتدثْا ظْف فُـ ما أريد افقصقل إفٔف هق أنف‬
‫يُّـ تىبٔؼ إزاحة فِسىر إول مـ افٍَرة بٍْس ادبدأ افذ يًّؾ بف إزاحة آؿتباس فُـ هذه ادرة‬
‫يواف اإلزاحة ظـ ضريؼ ‪- CSS‬‬

‫إلزاحة افسىر إول مـ افٍَرة ٕستخدم اخلاصٔة ‪ text-indent‬ثؿ ًٕىٔٓا ؿّٔة مساؾة اإلزاحة‬
‫مَدرة بقحدة افَٔاس بُسؾ أو بافْسبة ادئقية ـام يع‪9‬‬
‫{ ‪p‬‬
‫;‪text-indent: 50px‬‬
‫}‬

‫‪65‬‬
 ‫‪ 0/-2‬افىراز وافزخرؾة‬

‫رأجْا ذم افدروس إوػ أن اشتخدام افقشؿ ‪ em‬جيًؾ افْص مائال بْٔام افقشؿ ‪ strong‬جيًؾ افْص‬
‫أشقد ظريض‪ -‬وبام أنْا ؿِْا أن اشتخدام ‪ xhtml‬يُقن إلضاؾة ادوّقن ؾَط دون افتْسٔؼ ؾٕ٘ف ٓ‬
‫جيب أن يُقن افداؾع وراء اشتخدام ‪ em‬و ‪ strong‬هق افتْسٔؼ ادبدئل فُؾ مْٓام‪ ،‬بؾ جيب‬
‫اشتخدامٓام فتحديد جمّقظة مًْٔة مـ افُِامت ادّٓة بٌاية تْسَٔٓا ـِٓا ؾٔام ظـ ضريؼ ‪ -CSS‬ـٖن‬
‫ٕستخدم ‪ em‬مثال مع مجٔع أشامء إصخاص افقاردة ذم افْص‪-‬‬

‫أما فتىبٔؼ إمافة أو اطٓار ٕص بإشقد افًريض ـتْسٔؼ ؾٓق مـ مٓام فٌة ‪ CSS‬يُّـ تىبَٔٓا مع‬
‫أي ظْك مـ ٕقع ٕيص‪ ،‬ـام ويُّـ ازافة آمافة آؾسايض فِقشؿ ‪ em‬أو افتْسٔؼ آؾسايض فِقشؿ‬
‫‪-strong‬‬

‫‪ٕ -0‬ستخدم اخلاصٔة ‪ font-style‬إلمافة افْص ـام تًٍِف افقشؿ ‪ em‬متاما وتٖخذ افَٔؿ‬
‫افتافٔة‪9‬‬

‫‪ :Italic‬أي إمافة افْص‬ ‫‪‬‬

‫‪:Oblique‬هذا ٍٕس افسابؼ جيًؾ افْص مائال وٓ ؾرق مِحقظ بْٔٓام‬ ‫‪‬‬

‫‪ :Normal‬أي جًؾ افْص ظادي (وتستخدم إلزافة افتْسٔؼ آؾسايض‬ ‫‪‬‬

‫فِقشؿ ‪)-em‬‬

‫‪ٕ -1‬ستخدم اخلاصٔة ‪ font-weight‬إلطٓار افْص بإشقد افًريض ـام تًٍِف افقشؿ‬
‫‪ strong‬متاما وتٖخذ احدى افَّٔتغ افتافٔتغ‪9‬‬

‫‪ 9 Bold‬أي جًؾ افْص ؽامض‬ ‫‪‬‬

‫‪ 9Normal‬أي جًؾ افْص ظادي (وتستخدم إلزافة افتْسٔؼ آؾسايض‬ ‫‪‬‬

‫فِقشؿ ‪)-strong‬‬

‫‪ٕ -2‬ستخدم اخلاصٔة ‪ text-decoration‬فتزيغ وزخرؾة افْص ـتسىر وصىب‪ ،‬أو وضع‬
‫خط ؾقؿٓا إضاؾة إلمُإٔة جًؾ افْص ييٓر وخيتٍل وتٖخذ احدى افَٔؿ افتافٔة‪9‬‬

‫‪ 9Underline‬تسىر افْص‬ ‫‪‬‬

‫‪66‬‬
 ‫ صىب افْص‬9 line-through 

‫ خط ؾقؿل‬overline 

‫ ومض افْص أي ييٓر وخيتٍل‬Blink 

‫ ٓ رء أي جًؾ افْص ظادي‬9none 

-‫مالحية ومض افْص ٓ يًّؾ إٓ مع متهٍح ؾرؾُس‬

<body>

<p class="under">‫ تسىر افْس‬Underline</p>

<p class="through">‫ صىب افْص‬line-through</p>

<p class="over">‫ خط ؾقق افْص‬overline</p>

</body>

9CSS ‫مِػ‬
p {
font-size: 30px;
}
.under {
text-decoration: underline;
}
.through {
text-decoration: line-through;
}
.over {
text-decoration: overline;
}

67
 ‫افنُؾ ‪5-0/‬‬

‫‪ 0/-3‬تْسٔؼ افَقائؿ جٓة ‪CSS‬‬

‫‪ 0/-3-0‬إزافة إزاحة افَائّة‬

‫تسّح اخلاصٔة ‪ list-style-position‬بتحديد حماذاة افْص ظْدما يًقد ادٗذ إػ افسىر (أي‬
‫ظْدما يتُقن ٕص افًْك مـ أـثر مـ شىر واحد ـام يبْٔف افنُؾ ‪9)0,0/‬‬

‫افنُؾ ‪6-0/‬‬

‫تبغ افَائّة إوػ ذم افنُؾ ‪ 0,0/‬افٍُٔٔة افتل ييٓر ظِٔٓا افْص بافنُؾ آؾسايض ظْدما يتُقن‬

‫‪68‬‬
‫ٕص افًْك مـ أـثر مـ شىريـ حٔث ييٓر افسىران باإلزاحة ٍٕسٓا (هْا بداية ـِّة "ظْك" ذم‬
‫افسىر إول وـِّة " دون" ذم افسىر افثاين) أما افَائّة افثاين حتتٓا مباذة ؾتبغ ـٍٔٔة طٓقر افْص‬
‫بًد تىبٔؼ اخلاصٔة ‪ list-style-position‬مع افَّٔة ‪ inside‬إلزافة آزاحة حٔث تبدأ ٕص‬
‫افسىر افثاين حتت ادًرف مباذة ـام ٕرى ذفؽ مع افسىر افثاين فَِائّة افثإٔة "مع إزافة إزاحة‬
‫افَائّة"‪-‬‬
‫ٕستخدم اخلاصٔة ‪ list-style-position‬مع افَّٔتغ ‪( out‬آؾسايض) إلزاحة افْص افذي حتت‬
‫افسىر إول فٔبدأ حٔث بدأ افسىر إول‪ ،‬أو مع افَّٔة ‪ inside‬إلزافة آزاحة ـل يبدأ افْص حتت‬
‫ادًرف مباذة‪ ،‬وؾٔام يع إوامر ادستخدمة ذم افنُؾ ‪-0,0/‬‬
‫أوامر ‪9xhtml‬‬
‫>‪)</p‬آؾسايض( ‪<p>list-style-position: outside‬‬

‫>"‪<ul class="out‬‬

‫دون إزافة إزاحة افَائّة>‪<br /‬ظْك متُقن مـ ظْكيـ>‪<li‬‬

‫>‪</li‬‬
‫>‪</ul‬‬
‫>‪<p>list-style-position: inside</p‬‬
‫>"‪<ul class="in‬‬

‫مع إزافة إزاحة افَائّة>‪<br /‬ظْك متُقن مـ شىريـ>‪<li‬‬

‫>‪</li‬‬
‫>‪</ul‬‬

‫أوامر ‪9CSS‬‬
‫{ ‪.out‬‬
‫;‪list-style-position: outside‬‬
‫}‬
‫{ ‪.in‬‬
‫;‪list-style-position: inside‬‬
‫}‬

‫ٕتٔجة هذا ادثال هل ٍٕس افْتٔجة ذم افنُؾ ‪-0,0/‬‬

‫‪7/‬‬
 ‫‪ 0/-3-1‬تٌٔر ادًرف آؾسايض‬

‫َٕهد مـ تٌٔر ادًرف آؾسايض؛ اشتبدال افدائرة ادّتِئة افتل تيٓر بداية ـؾ ظْك بقء آخر‬
‫بافْسبة فَِقائؿ افٌر ادْيّة‪ ،‬أو بسؿٔؿ خمتِػ ظـ إرؿام افًادية بافْسبة فْقع افَقائؿ ادْيّة‪ -‬ذم‬
‫حافة افَقائؿ افٌر ادْيّة يُّـ اشتبدال افَْىة افسقداء بـ‪ 9‬مربع صٌر أو دائرة مٍرؽة أما ذم حافة‬
‫افَقائؿ ادْيّة ؾُّٔـ اشتبدال ترتٔب إرؿام بٖحرف أو بٖرؿام مـ افْقع افالتْٔل أو بٖرؿام مـ ٕقع‬
‫آخر ـام شْرى ذفؽ ذم ادثال رؿؿ ()‪-‬‬
‫ٕستخدم اخلاصٔة ‪ list-style-type‬مع ـال ٕقظل افَقائؿ (مْيّة أم ؽر مْيّة) فتٌٔر ٕقع مًرف‬
‫افَائّة أو ٕقع افستٔب فُـ بافىبع فُؾ ٕقع مـ أنقاع افَقائؿ ؿٔؿ خمتٍِة ظذ أخر وؾٔام يع ذـر‬
‫تِؽ افَٔؿ حسب ٕقع افَائّة‪9‬‬
‫ؿٔؿ افَقائؿ افٌر ادْيّة >‪9<ul‬‬ ‫‪‬‬
‫‪ : disc‬دائرة ممتِئة (آؾسايض)‬ ‫‪o‬‬
‫‪ :circle‬دائرة مٍرؽة‬ ‫‪o‬‬
‫‪ :square‬مربع‬ ‫‪o‬‬
‫‪ ٓ :none‬رء أي ييٓر افَائّة دون أي ممثؾ فف‬ ‫‪o‬‬
‫ؿٔؿ افَقائؿ ادْيّة >‪9 <ol‬‬ ‫‪‬‬
‫‪ : decimal‬أرؿام ظادية )…‪ (1, 2,3‬آؾسايض‬ ‫‪o‬‬
‫‪ : Decimal-leading-zero‬أرؿام ظادية صٍرية )‪(01, 02, 03...‬‬ ‫‪o‬‬
‫‪ 9arabic-indic‬أرؿام ظربٔة ظادية‬ ‫‪o‬‬
‫‪ : Upper-roman‬أرؿام ٓتْٔٔة ـبرة )‪(I, II, III...‬‬ ‫‪o‬‬
‫‪ : Lower-roman‬أرؿام ٓتْٔٔة صٌرة )‪(i, ii, iii...‬‬ ‫‪o‬‬
‫‪ : Upper-alpha‬أحرف أبجدي إُِٕٔزي ـبرة )‪(A, B, C...‬‬ ‫‪o‬‬
‫‪ :lower-alpha‬أحرف أبجدي إُِٕٔزي صٌرة )‪(a, b, c...‬‬ ‫‪o‬‬
‫‪ :lower-greek‬افسؿٔؿ افٌريؽ‬ ‫‪o‬‬
‫وأن فْٖخذ ظذ ـؾ تِؽ افَٔؿ مثال واحد صامؾ يبغ ٕتائجٓا افًٍع ظْد افتىبٔؼ‪9‬‬
‫أوامر ‪9xhtml‬‬
‫>"‪<ul class="daira‬‬

‫‪70‬‬
 <li>‫<تٍاحة‬/li>

</ul>
<ul class="moraba3">

<li>‫<تٍاحة‬/li>

</ul>
<ul class="lashai">

<li>‫<تٍاحة‬/li>

</ ul >
<ol class="arkam_araby">

<li>‫<افًْك إول‬/li>

</ol>
<ol class="ahruf_sakhir">

<li>‫<افًْك إول‬/li>

</ol>
<ol class="ahruf_rumani">

<li>‫<افًْك إول‬/li>

</ol>

-ol ‫ أو‬ul ‫ ذم ـؾ ؿائّة‬li ‫يرجك ادالحية أنْل ؿّت بآؿتهار ظذ ظْك واحد‬
9CSS ‫أوامر‬
.daira {
list-style-type: circle;
}
.moraba3 {
list-style-type: square;
}
.lashai {
list-style-type: none;
}
.arkam_araby {
list-style-type: arabic-indic;

71
}
.ahruf_sakhir {
list-style-type: lower-alpha;
}
.ahruf_rumani {
list-style-type: upper-roman;
}
.ahruf_greki {
list-style-type: lower-greek;
}

9‫افْتٔجة هل‬

7-0/ ‫افنُؾ‬

72
 ‫افنُؾ ‪8-0/‬‬

‫‪ 0/-3-2‬متثٔؾ ادًرف بهقرة‬

‫فَْؾ أن ذوؿؽ رؾٔع ‪ ,‬وهذا يْاشبْل – اضًِت ظذ افَٔؿ افسابَة ؾِؿ دمد ما ينبف ذوؿؽ وبافتايل‬
‫تتساءل حقل امُإٔة وـٍٔٔة إناء ممثؾ خاص بؽ ؟‬
‫حسْا ‪ ,‬يا مبدع ‪ ,‬مـ ادُّـ تًريػ افَقائؿ ؽر ادْيّة بهقرة بدٓ مـ ادًرؾات آؾساضٔة فٌة‬
‫‪ CSS‬وذفؽ باشتخدام اخلاصٔة ‪ list-style-image‬فتًريػ افهقرة افتل شتتّثؾ ـًّرف‬
‫فَِائّة‪ -‬وفـ أمؾ مـ افتُرار أنف ـِام أردٕا تًريػ صقرة ذم مِػ ‪ CSS‬ؾربام خيتِػ ٕقع اخلاصٔة‬
‫فُـ ـٍٔٔة تًريػ افهقرة ٓ ختتِػ بؾ تُقن دائام ظذ افنُؾ‪ url("imgname.png”) 9‬وـذفؽ‬
‫ـٍٔٔة حتديد مسار افهقرة حٔث يتؿ ذفؽ وؾَا دُان مِػ ‪ CSS‬وفٔس ‪ -xhtml‬وؾٔام يع مثال‬
‫اشتخدام مًرف خاص‪-‬‬
‫أوامر ‪9xhtml‬‬
‫>"‪<ul class="mo3arif‬‬

‫‪73‬‬
 <li>‫<تٍاحة‬/li>

</ul>

9CSS ‫أوامر‬
.mo3arif {
list-style-image: url ("imgname.png");
}

9‫افْتٔجة‬

0/-0/ ‫افنُؾ‬

74
 ‫إفقان وضرق إضاؾتٓا‬ ‫‪00‬‬

‫يُّـ تٌٔر فقن جم ّقظة ـبرة مـ خهائص افًْاس ـتٌٔر فقن افْص وخٍِٔتف أو خٍِٔة ـامؾ‬
‫افهٍحة أو حتك تٌٔر فقن ظْك ظْد مرور افٍٖرة ظِٔف‪ ،‬وإمر ذم ؽاية افبساضة وربام تًرف اخلاصٔة‬
‫ادستخدمة ذم ذفؽ وهق ‪ color‬إٓ أن ما شٔبدو مًَدا ربام هل افىرق افتل يُّْْا بقاشىتٓا حتديد‬
‫ؿّٔة افِقن افذي ٕريده فًِْك‪ ،‬وهل ـافتايل‪9‬‬

‫‪ 00-0‬ضريَة افتسّٔة آشّٔة‬

‫تًد افتسّٔة آشّٔة أشٓؾ هذه افىرق ومًيؿ ادبتدئغ حيِّقن بف ؿبؾ أن يٍاجٗوا بّحدوديتٓا‬
‫وظدم ؿدرهتا ظذ تِبٔة حاجاهتؿ مـ إفقان إذ ٓ تقؾر هذه افىريَة شقى ‪ 05‬فقٕا ؾَط‪ ،‬هل إفقان‬
‫إشاشٔة‪َّ -‬‬
‫وؿؾ ما يستخدمٓا ادهّّقن اخلزاء‪ -‬وظذ ـؾ حال ؾٔام يع أشامء هذه إفقان‪9‬‬

‫ادَابؾ افًريب‬ ‫افِقن‬ ‫ادَابؾ افًريب‬ ‫افِقن‬

‫أصٍر‬ ‫‪yellow‬‬ ‫أبٔض‬ ‫‪white‬‬

‫زيتقين‬ ‫‪olive‬‬ ‫ؾيض‬ ‫‪silver‬‬

‫أزرق‬ ‫‪blue‬‬ ‫بْل‬ ‫‪gray‬‬

‫أزرق داــ‬ ‫‪navy‬‬ ‫أشقد‬ ‫‪black‬‬

‫أرجقاين‬ ‫‪fuchsia‬‬ ‫أمحر‬ ‫‪red‬‬

‫أزرق ؾاتح‬ ‫‪aqua‬‬ ‫أمحر داــ‬ ‫‪maroon‬‬

‫مزيج أزرق أخرض‬ ‫‪teal‬‬ ‫أخرض‬ ‫‪green‬‬

‫بٍْسجل‬ ‫‪purple‬‬ ‫أخرض ؾاتح‬ ‫‪Lime‬‬

‫وأن فْٖخذ ادثال ظـ خىاب مرتـ فقثر ـْٔغ فتِقيـ بًض افًْاس بحٔث ًٕىل افِقن إزرق‬
‫فًِْقان وافِقن إمحر ٓشؿ افُاتب‪-‬‬

‫‪75‬‬
h2 {
text-align: center;
font-family: tahoma, Arial, "Arial Black", sans-
serif;
color: blue;
}
blockquote {
text-align: justify;
font-family: "Courier New", "Comic Sans MS", sans-
serif;
}
.by {
text-align: left;
font-size: 120%;
color: red;
}

9‫افْتٔجة‬

0-00 ‫افنُؾ‬

76
 ‫‪ 00-1‬ضريَة افتسّٔة افسداشٔة‬

‫تًد هذه افىريَة إـثر اشتخداما حٔث حيتقي ظذ ماليغ إفقان فُـ مع إشػ مل يُـ مـ‬
‫ادُّـ تسّٔة هذه إفقان بٖشامء ظادية ـام ذم افىريَة افسابَة فذا تؿ اتباع ضريَة أشٓؾ وأوؾر ذم‬
‫تًريػ تِؽ إفقان هل ضريَة افتسّٔة افسداشٔة‪.‬‬

‫مـ ادًِ قم أن أصؾ إفقان مجًٔٓا ثالثة هل‪( 9‬إمحر‪ ،‬وإخرض‪ ،‬وإزرق) وإلجياد أي فقن َٕقم‬
‫بّزج تِؽ إفقان افثالثة بْسب خمتٍِة فتقفٔد أي فقن جديد‪ -‬هذا هق افىريَة ادتبع ذم ‪CSS‬‬
‫فتًريػ ؿّٔة افِقن ادراد وـؾ فقن ذم ‪ CSS‬شُٔقن صبٔٓا بـ ‪-#FF22AA‬‬

‫إذ ‪ #FF22AA‬متثؾ مزيج دج ّقظة أحرف و أرؿام تبدأ إجبارا بًالمة ادربع ‪ #‬ثؿ مزيج إحرف‬
‫مـ ‪ a‬إػ ‪ f‬وإرؿام مـ ‪ /‬إػ ‪ 8‬بحٔث تنر افَّٔتان إوفٔتان فْسبة مزيج افِقن إمحر وافَّٔتان ذم‬
‫افقشط فْسبة افِقن إخرض وأخرا افَّٔتان ادتبَٔتغ متثالن ٕسبة مزيج افِقن إزرق‪-‬‬

‫وفًِِؿ ؾٕ٘ف ٓ يقجد اشساتٔجٔة واضحة يُّـ ؾّٓٓا واتباظٓا دزج إفقان‪ -‬ـؾ ما ظِٔؽ مًرؾتف هق‬
‫أن ادزيج افبدائل ‪ #//////‬خيص افِقن إشقد‪ -‬وفِتجربة اشتبدفت مقضع افِقن إمحر باحلرف‬
‫‪A‬ؾهار افرمز ‪ #AA0000‬وظْدما جربتٓا ظذ ادتهٍح ـان افِقن افياهر هق إمحر ثؿ َِٕت‬
‫احلرف ‪ a‬دقضع افِقن إخرض أي ‪ #00AA00‬وبافتجربة ـان افِقن أخرض ثؿ ؾًِت ٍٕس إمر‬
‫مع مقضع افِقن إزرق ؾُان افْتٔجة أزرق ما يدل ظذ أن مجٔع إحرف يُّـ أن حتؾ حمؾ أخر‬
‫فُـ يبَك ادزج ؾـ يتَْٓا ادهّؿ مع مرور افقؿت‪.‬‬

‫وأخرا جيب أن أظسف أنف يقجد حماوفة فتسّٔة إفقان إـثر اشتخداما ـل ٕتُّـ مـ اشتخدامٓا‬
‫ـافىريَة إوػ وؿد تقصؾ افَائّة حتك أن إػ ‪ 036‬فقٕا فُـ ضقل افَائّة إضاؾة فىقل بًض‬
‫إشامء (مثال ‪ )LightGoldenRodYellow‬دمًؾ حٍظ هذه إشامء أمرا صبف مستحٔؾ‪ ،‬فذا‬
‫أنهحؽ ب٘ضاؾة افرابىتغ افتافٔتغ ذم ادٍوِة ظْدك‪9‬‬

‫جدول رمقز وأشامء افـ‪ 036‬فقٕا إـثر اشتخداما‪9‬‬

‫‪http://www.w3schools.com/CSSref/CSS_colornames.asp‬‬

‫جدول رمقز تدرجات بًض إفقان‪9‬‬

‫‪77‬‬
 ‫‪http://www.w3schools.com/CSSref/CSS_colors.asp‬‬

‫فتجربة هذه افىريَة ؿؿ بافتًديؾ ظذ ٍٕس أوامر ادثال ذم افىريَة افسابَة وضع ؿّٔة افِقن حسب‬
‫هذه افىريَة مثال‪9‬‬

‫; ‪color :# CC6600‬‬

‫‪ 00-2‬ضريَة ‪rgb‬‬

‫ترمز ‪ rgb‬إػ إفقان إشاشٔة أمحر‪ ،‬أخرض وأزرق (‪ -)Red Green Blue‬تًّؾ هذه افىريَة‬
‫ـسابَف مـ حٔث ؿهة مزج إفقان افثالثة فُـ هذه ادرة باشتخدام أرؿام مـ ‪ /‬إػ ‪ 144‬فُؾ ٕسبة‬
‫ـام يع‪9‬‬

‫(‪,120) ;13/,05/color: rgb‬‬

‫حلسـ احلظ هذه ادرة يُّْؽ احلهقل ظذ مزيج أخقإؽ دون أن دمٓد ٍٕسؽ ؾزٕامج افرشام افذي‬
‫يْزل تَِائٔا مع ٕيام افقيْدوز خيتار أخقإف هبذه افىريَة فذا بُؾ بساضة ٕستىٔع آشتًإة بف دزج‬
‫إفقان‪-‬‬

‫افنُؾ ‪ 91-00‬أوٓ َٕقم بافوٌط ظذ ٕاؾذة اختٔار إفقان ـام هق ذم افنُؾ‪-‬‬

‫‪78‬‬
 ‫افنُؾ ‪2-00‬‬

‫افَٔؿ افتل ذم ادربع تنُؾ ؿّٔة ادزيج ؾإوػ هل حسبة افِقن إمحر (‪ )05/‬ئِٓا ٕسبة افِقن‬
‫إخرض (‪ )13/‬وأخرا ٕسبة افِقن إزرق (‪ )01/‬وظذ هذا يُقن حتديد افَّٔة ـام يع‪color: 9‬‬
‫; )‪rgb(160, 240, 120‬‬

‫‪8/‬‬
 ‫اخلٍِٔة‬ ‫‪01‬‬

‫يُّـ تٌٔر خٍِٔة أي ظْك مـ ظْاس ‪ xhtml‬شقاء جًؾ خٍِٔتف فقن ظادي أو صقرة فُـ ؿبؾ‬
‫ذفؽ جيب ظِْٔا أن ْٕتبف حا ٕسّٔف » مٍٓقم افنّقفٔة « ويًْل أنْا فق ؿّْا بتٌٔر خٍِٔة ظْك ما‬
‫ؾافْتٔجة شٔن ّؾ مجٔع افًْاس افتل بداخِف إذ شتٖخذ ٍٕس اخلٍِٔة‪ -‬وبًبارة أخرى إذا أضٍْا خٍِٔة‬
‫أخرض فًْك ٕص ‪ p‬وـان داخؾ هذا افًْك جمّقظة وشقم مثؾ ‪ em ،strong‬أو وشؿ رابىة ‪a‬‬
‫ؾِقن خٍِٔة مجٔع هذه افقشقم شتُقن إخرض ٕهنا تَع داخؾ افقشؿ ‪ p‬أما فق أضٍْا اخلٍِٔة فِقشؿ‬
‫افداخع ‪ em‬مثال ؾِـ يٗثر ذفؽ ظذ افقشؿ اخلارجل ‪-p‬‬

‫‪ 01-0‬فقن اخلٍِٔة‬

‫ؿِْا أنف إذا تؿ إضاؾة خٍِٔة فًْك ما ؾافًْاس داخِف تٖخذ ٍٕس اخلٍِٔة وبام أن ‪ body‬هق افقشؿ‬
‫إول فهٍحتْا وافذي حئط بجّٔع ظْاس افهٍحة ؾال خيٍك ظِٔؽ أنْا إذا أردٕا تًديؾ فقن خٍِٔة‬
‫افهٍحة ؾسَْقم باشتٓداف افقشؿ ‪ -body‬وخاصٔة تًديؾ فقن اخلٍِٔة شقاء فًْك أو فُامؾ‬
‫افهٍحة هل ‪ background-color‬يتؿ حتديد ؿّٔتٓا (يًْل افِقن ادراد) ب٘حدى افىرق افسابَة‬
‫افؼح ـام هق ذم ادثال افتايل‪9‬‬
‫{ ‪body‬‬
‫;‪background-color: silver‬‬
‫}‬

‫بادْاشبة ٓ يَتك افنّقفٔة ظذ اخلٍِٔة ؾَط ب ؾ يتخىاه فٔنّؾ ـامؾ افتْسَٔات إخرى ؾِق تؿ‬
‫تِقيـ ظْك ما بافِقن افٍيض مثال ؾّحتقى افقشقم داخؾ تِؽ افقشؿ شتيٓر ـذفؽ بافِقن افٍيض‬
‫ما مل خيهص فف تْسٔؼ آخر‪ ،‬ويْىبؼ هذا أجوا ظذ ‪ body‬ؾٖي تْسٔؼ يقضع ظذ افقشؿ ‪ body‬يتؿ‬
‫تىبَٔف ظذ مجٔع ظْاس افهٍحة‪ ،‬أظقد وأـرر بؼط ظدم ختهٔص تْسٔؼ آخر فًِْاس داخِف‪-‬‬

‫مثال‪9‬‬

‫>‪<body‬‬

‫‪80‬‬
 ‫>‪</h1‬ظْقان مـ افدرجة إوػ>‪<h1‬‬

‫>‪</h2‬ظْقان مـ افدرجة افثإٔة>‪<h2‬‬

‫>‪<p‬‬ ‫إذا شًّت افرجؾ‬

‫>‪<strong‬‬ ‫>‪</strong‬يَقل ؾٔؽ مـ اخلر ما فٔس ؾٔؽ‬

‫ؾال تٖمـ أن‬

‫>‪<strong‬‬ ‫>‪. </strong‬يَقل ؾٔؽ مـ افؼ ما فٔس ؾٔؽ‬

‫>‪</p‬‬
‫>‪</body‬‬

‫مِػ ‪9CSS‬‬
‫{ ‪body‬‬
‫;‪background-color: silver‬‬
‫; ‪color : blue‬‬
‫}‬
‫{‪h2‬‬
‫;‪color: red‬‬
‫}‬
‫{‪strong‬‬
‫;‪background-color: yellow‬‬
‫}‬

‫ذم افبداية تؿ إضاؾة خٍِٔة ؾيض فِهٍحة مع تِقيـ مجٔع افْهقص بافِقن ٕزرق ـؾ هذه مـ خالل‬
‫اشتٓداف افقشؿ ‪ body‬ما تًْل أن اخلٍِٔة آؾساضٔة ٕي ظْك ذم افهٍحة شتُقن افِقن افٍيض‬
‫وـذفؽ افِقن آؾسايض جلّٔع افًْاس افْهٔة شتُقن إزرق‪ -‬ثؿ تؿ بًدها تًديؾ فقن افًْقان‬
‫مـ افدرجة افثإٔة (‪ )h2‬وإظىائٓا افِقن إمحر ـام وتؿ تًديؾ فقن خٍِٔة افًْك ‪ strong‬وإظىائٓا‬
‫افَّٔة أصٍر‪-‬‬

‫‪81‬‬
 ‫افنُؾ ‪0-01‬‬

‫‪ 01-1‬اشتخدام صقرة ـخٍِٔة‬

‫‪ 01-1-0‬إضاؾة صقرة خٍِٔة‬

‫يُّـ إضاؾة صقرة ـخٍِٔة ٕي ظْك ـام يُّـ إضاؾة صقرة ـخٍِٔة فُامؾ افهٍحة ظـ ضريؼ‬
‫اشتٓداف افقشؿ‪ - body‬اخلاصٔة ادستخدمة ذم حتديد صقرة اخلٍِٔة هل ‪background-‬‬
‫‪ ،image‬وصٌٔتٓا ـافتايل‪9‬‬

‫;)"‪background-image: url("image/bg.png‬‬

‫تدل ؿّٔة ‪ url‬ظذ مسار ادجِد افذي حيتقي ظذ افهقرة و يُّـ أن يُقن جمِد متقاجدة ذم مقؿًْا‬
‫أو ذم مقؿع آخر حْٔٓا ٕتقصؾ إفٔٓا مـ خالل رابىة ادقؿع مع ذـر مسار افهقرة بافُامؾ‪-‬‬

‫ٕحسب مسار ادجِد –ذم حال تقاجد افهقرة ذم مقؿًْا‪ ,‬باظتبار مِػ ‪ CSS‬وفٔس مِػ ‪xhtml‬‬
‫ـام ـْا ًٍٕؾ ظْد إضاؾة صقرة ظادية ـًْك دِػ ‪-xhtml‬‬

‫مثال‪9‬‬

‫ًٕقد وٕستخدم مثال خىاب مارتـ وٕؤػ صقرة خٍِٔة افهٍحة ظذ افقشؿ ‪ body‬ـام يع‪9‬‬
‫{ ‪body‬‬
‫;)"‪background-image: url("image/MLKFreedom.png‬‬

‫‪82‬‬
}
h2 {
text-align: center;
font-family: tahoma, Arial, "Arial Black", sans-
serif;
color: blue;
}
blockquote {
text-align: justify;
font-family: "Courier New", "Comic Sans MS", sans-
serif;
}
.by {
text-align: left;
font-size: 120%;
color: red;
}

9‫افْتٔجة‬

1-01 ‫افنُؾ‬

83
 ‫‪ 01-1-1‬تثبٔت اخلٍِٔة مـ ظدمف‬

‫تسّح فْا ‪ CSS‬بافتحُؿ بحافة صقرة اخلٍِٔة إذا ما أردٕا أن ٕجًِٓا متحرـة بحٔث تتحرك مع مجٔع‬
‫ظْاس افهٍحة صًقدا وٕزوٓ أو إذا ما أردٕا أن ٕجًِٓا ثابتة بحٔث تتحرك افًْاس دوهنا‪-‬‬
‫وٕستخدم اخلاصٔة ‪ background-attachment‬فًٍؾ ذفؽ مع افَّٔة ‪ fixed‬جلًِٓا ثابتة أو‬
‫‪ scroll‬جلًِٓا متحرـة‪ ،‬وهل افَّٔة آؾساضٔة‪-‬‬

‫فتجربة هذه اخلاصٔة يُّْؽ اشتخدام ٍٕس ادثال افسابؼ مع اضاؾة افسىر افتايل ظذ جمّقظة‬
‫افتْسَٔات اخلاصة بافقشؿ ‪ body‬حتت ‪ background-image‬مباذة ـام يع‪9‬‬
‫{ ‪body‬‬
‫;)"‪background-image: url("image/MLKFreedom.jpg‬‬
‫;‪background-attachment: fixed‬‬
‫}‬

‫مالحظ‪ :‬جيب أن يكون النص كبري كي تالحظ فاعلية هذه اخلاصية‪.‬‬

‫‪ 01-1-2‬تُرار اخلٍِٔة مـ ظدمف‬

‫بافىبع ٓحيت أن اخلٍِٔة يتُرر تَِائٔا إػ أن يّتِ ـامؾ افهٍحة فُـ يُّـ تًديؾ ذفؽ بحٔث‬
‫ٕجًِف يتُرر ظامقديا أو أؾَٔا أو ييٓر ؾَط مرة واحدة دون تُرار‪ ،‬فًٍؾ ذفؽ ٕستخدم اخلاصٔة‬
‫‪ background-repeat‬مع إحدى افَٔؿ افتافٔة‪9‬‬

‫‪ 9no-repeat‬ييٓر افهقرة مرة واحدة دون تُرار‬ ‫‪‬‬

‫‪ 9repeat-x‬تُرار افهقرة ظامقديا‬ ‫‪‬‬
‫‪ 9repeat-y‬تُرار افهقرة أؾَٔا‬ ‫‪‬‬
‫‪ 9repeat‬تُرار افهقرة ظامقديا وأؾَٔا إػ أن يّتِ افهٍحة (افَّٔة آؾسايض)‬ ‫‪‬‬
‫فتجربة هذه اخلاصٔة يُّْؽ إضاؾة اجلِّة افتافٔة ظذ جمّقظة افتْسَٔات اخلاصة بافقشؿ ‪ body‬ـام‬
‫يع‪9‬‬
‫{ ‪body‬‬
‫;)"‪background-image: url("image/MLKFreedom.jpg‬‬
‫;‪background-attachment: fixed‬‬
‫; ‪background-repeat : repeat-y‬‬

‫‪84‬‬
‫}‬

‫افْتٔجة‪9‬‬

‫افنُؾ ‪2-01‬‬

‫‪ 01-1-3‬مقضع اخلٍِٔة‬

‫بَك هْاك خاصٔة أخرة مرتبىة بهقرة خٍِٔة افهٍحة وهل ‪ background-position‬أي‬
‫مقضع أو مُان طٓقر افهقرة وهْاك أشِقبان فبٔان ذفؽ‪:‬‬

‫‪ -0‬إما أن َٕقم بتحديد مساحة تباظد افهقرة ظـ يسار وأظذ افهٍحة متّثِة ذم ؿٔؿ رؿّٔة‬
‫بقحدة افَٔاس ‪ px‬ـام يع‪:‬‬
‫;‪background-position:71px 71px‬‬

‫وتًْل هذه‪ 9‬طٓقر افهقرة ظذ بًد ‪ 6/‬بُسؾ مـ افٔسار و‪ 6/‬بُسؾ مـ إظذ‪ -‬هْاك ؿٔد‬
‫ٓشتخدام هذه افىريَة وهق أن يُقن افهقرة ؽر متُررة ؾافهقرة ادتُررة متِ افٍحة بافُامؾ فذا‬
‫ٓ حاجة فتحديد مقضع افهقرة‪ ،‬أما إذا تُرر ظامقديا أو أؾَٔا ؾ٘ن افَّٔة إوػ افتل ترمز فتباظد‬
‫افهقرة ظـ افٔسار هل وحدها افتل تًّؾ بْٔام افَّٔة افثإٔة افتل ترمز فتباظد افهقرة ظـ إظذ ٓ‬
‫يُقن فف أي ؾاظِٔة‪-‬‬

‫‪ -1‬افىريَة افثإٔة هل أن ٕستخدم افَٔؿ افتافٔة‪:‬‬

‫‪85‬‬
 ‫ ؾقق‬9 top 

‫ حتت‬9 bottom 

‫ يسار‬9 left 

‫ وشط‬9 center 

‫ يّغ‬9 right 

‫ تًْل اطٓار اخلٍِٔة جٓة افّٔغ أظذ افهٍحة‬top left ‫ويُّـ دمج ؿّٔتغ فتحديد اجلٓات ؾّثال‬
9‫ يّغ أشٍؾ افهٍحة وادثال افتايل يقضح ـٍٔٔة ذفؽ‬9‫ تًْل اطٓار اخلٍِٔة‬bottom right ‫وأجوا‬
body {
background-image: url("image/MLKFreedom.jpg");
background-attachment: fixed;
background-repeat : no-repeat ;
background-position: bottom left;
}

‫افْتٔجة‬

3-01 ‫افنُؾ‬

86
 ‫‪ 01-1-4‬اختهار خهائص اخلٍِٔة‬

‫ظْدما ٕناهد خهائص اخلٍِٔة ٕجد أهنا تبد دائام بُِّة ‪ background‬ئِٓا اشؿ يدل ظذ وطٍٔة‬
‫اخلاصٔة‪ ،‬إذا افٍُرة هل أن ٕستخدم ؾَط ـِّة ‪ background‬ـخاصٔة ًٕىٔٓا افَٔؿ ادراد مع‬
‫افٍهؾ بْٔٓا بّساؾة‪ ،‬ؾاخلهائص افسابَة مثال تهبح ظْد اختهارها‪9‬‬
‫{ ‪body‬‬
‫‪background: #f0fafc url("image/bg.png") no-repeat‬‬
‫;‪bottom left fixed‬‬
‫}‬

‫ٕتٔجة هذا ادثال شُٔقن ٍٕس ٕتٔجة ادثال افسابؼ فُـ مع اضاؾة بسٔىة وهل تِقيـ اجلزء ادتبَل مـ‬
‫اخلٍِٔة بافِقن ‪( # f0fafc‬فِّالحية‪ 9‬فٔس هْاك أي ترتٔب ذم ذـر افَٔؿ وـذفؽ يُّـ ذـر بًض‬
‫افَٔؿ دون إخرى)‪-‬‬

‫‪87‬‬
 ‫تْسٔؼ افروابط افتنًٔبٔة‬ ‫‪02‬‬

‫‪ 02-0‬افٍئات ادزيٍات‬

‫ٓ أصؽ أنؽ رأجت ذم بًض ادقاؿع أنف ظْدما ٕوع مٗذ افٍٖرة ظذ احدى افروابط تتٌر ميٓره‬
‫افبدائل إػ ميٓر جديد‪ ،‬ثؿ ٓ يِبث أن يًقد إػ ميٓره افذي ـان ظِٔف بّجرد ابًاد ادٗذ ظْف‪ -‬هذا‬
‫افْقع مـ افتْسَٔات يتؿ إنائٓا باشتخدام ما يسّك افٍئات ادزيٍة‪-‬‬

‫تنبف افٍئات ادزيٍات ما يع‪9‬‬

‫{ }‪a:hover‬‬

‫» ‪ « a‬هق وشؿ ظادي (وشؿ إضاؾة رابط) أما ‪ hover‬ؾٓل افٍئة ادزيٍة وهق اشؿ تؿ حجزه مسبَا مـ‬
‫ؿبؾ مزجمل فٌة ‪ -CSS‬حٔث مجٔع أشامء افٍئات ادزيٍات حمجقزات مسبَة وٓ دخؾ فِّهّؿ ذم‬
‫تسّٔتٓا‪ ٓ ،‬مـ بًٔد وٓ مـ ؿريب‪ ،‬إٓ ما ـان مـ تدخِف ذم تسّٔة ‪ class‬أو ‪ id‬إذ مـ ادُّـ اؿسان‬
‫ؾئة مزيٍة ب٘حدى تِؽ اخلاصٔتغ ـام شْرى ذفؽ ؾٔام بًد‪-‬‬

‫‪ 02-1‬تْسٔؼ افروابط‬

‫‪ 02-1-0‬افتْسٔؼ إويل فِرابط‬

‫أؿهد بافتْسٔؼ إويل؛ اديٓر افذي شٔيٓر ظِٔف افرابط ظْد ؾتح افهٍحة‪ -‬وؿد شبؼ ورأجْا أن‬
‫افتْسٔ ؼ آؾسايض ٕي رابط‪ 9‬هق أن ييٓر بافِقن إزرق مع تسىر افْص‪ ،‬فذا مّٓتْا شتُقن اظادة‬
‫تْسٔؼ افرابط‪ ،‬وأنا ظذ درجة مـ افَٔغ تسّح يل أن أؿقل أنؽ ؿادر ظذ ؾًؾ ذفؽ‪ -‬ؾَد شبؼ وحتدثْا‬
‫ظـ زخرؾة افْص ‪ ,‬أي اخلاصٔة ‪ – text-decoration‬حٔث ؿِْا أهنا تٗدي ظدة وطائػ مْٓا‬
‫تسىر افْص فذا إذا ـان فديْا رابط ٕيص مسىر وأردٕا إفٌاء اخلط حتتف ؾام ظِْٔا إٓ أن ٕستخدم ٍٕس‬
‫اخلاصٔة (‪ )text-decoration‬وًٕىٔٓا افَّٔة ‪ none‬إلزافة افتسىر‪ -‬وبافْسبة فِقن ٓ أطْؽ‬

‫‪88‬‬
font-( ‫) وـذفؽ حجّف‬font-style( ‫ وإن صئت يُّْؽ تٌٔر ٕقع اخلط‬-color ‫ٕسٔت اخلاصٔة‬
9‫) وؾٔام يع مثال بسٔط يبغ أهؿ افتْسَٔات إوفٔة‬size

9xhtml ‫مِػ‬
<body>
<p>

<a href="http://www.alkamaria.net">‫<افرئٔسة‬/a> |

<a href="news.html">‫<إخبار‬/a> |

<a href="contact.html">‫<اتهؾ بْا‬/a>

</p>
</body>

9CSS ‫مِػ‬
a {
text-decoration: none;
font-weight: bold;
font-size: 18px;
font-family: Arial, "Comic Sans MS", sans-serif;
color: #666666;
}

‫افْتٔجة‬

0-02 ‫افنُؾ‬

0//
 ‫‪ 02-1-1‬ظْد مرور ادٗذ‬

‫احلغ جاء دور افتىبٔؼ افًّع فٍِئات ادزيٍات وأول تىبٔؼ شُٔقن مع افٍئة ادزيٍة ‪ :hover‬وافتل‬
‫تًْل (ؾقق أو ظذ) ويتؿ إؿراهنا مع اشؿ افقشؿ أو إحدى اخلاصٔتغ ‪ class‬أو ‪ id‬فتًْل تىبٔؼ‬
‫افتْسَٔات ظْدما يُقن ادٗذ ؾقق افًْك ادحدد‪-‬‬

‫فتْسٔؼ افرابط ظْد مرور ادٗذ َٕقم ب٘ؿران افقشؿ ‪ :hover‬مع وشؿ إناء افروابط ‪ a‬ثؿ َٕقم‬
‫بتحديد افتْسَٔات ادراد ـام ذم ادثال افتايل‪9‬‬
‫{ ‪a:hover‬‬
‫;‪text-decoration: underline‬‬
‫;‪background-color: black‬‬
‫}‬

‫شتُقن ٕتٔجة هذا ادثال‪ 9‬اضاؾة خٍِٔة شقداء فِرابط ظْدما يُقن مٗذ افٍٖرة ؾقؿٓا مع تسىر‬
‫فِْص ـام ذم افنُؾ افتايل‪9‬‬

‫افنُؾ ‪1-02‬‬

‫‪ 02-1-2‬ظْد َٕر افرابط‬

‫هْاك إمُإٔة تىبٔؼ تْسٔؼ خمتِػ ييٓر ظْد افَْر ظذ آرتباط أي جمرد حليات بغ َٕر وإؾالت‬
‫افٍٖرة وـثرا ما ٓ يالحيف افزائر‪ٕ -‬ستخدم افٍئة ادزيٍة ‪ a:active‬فتًديؾ افتْسَٔات ـام هق ذم ادثال‬
‫افتايل‪9‬‬
‫{ ‪a:active‬‬

‫‪0/0‬‬
 ‫;‪text-decoration: none‬‬
‫;‪font-size: 30px‬‬
‫}‬

‫هْاك ؾئة مزيٍة آخر هل ‪ a:focus‬تستخدم بٍْس افىريَة وتٗدي ٍٕس وطٍٔة ادثال افسابؼ وٓ ؾرق‬
‫ؾًع بْٔٓا وبغ ‪ a:active‬ويُّْؽ دمربتٓا بٍْسؽ حتك ٓ تتٍاجٖ ذم افدروس افَادمة حٔث‬
‫شْستًرضٓا بقء مـ افتٍهٔؾ‪-‬‬

‫‪ 02-1-3‬بًد زيارة آرتباط‬

‫مـ ادُّـ تىبٔؼ تْسٔؼ خمتِػ فالرتباط افتل تؿ زيارهتا ـام هق بافْسبة فِتْسَٔات آؾساضٔة ظْدما‬
‫ٓ يتؿ افتًديؾ ظـ أي مـ تْسٔؼ آرتباط إذ ييٓر افتْسٔؼ اخلارجل بإزرق بْٔام افرابىة افتل تؿ‬
‫زيارهتا ييٓر بإزرق افٍاتح‪ ،‬وجيدر اإلصارة إػ أن مًيؿ ادهّّغ يىبَقن ظذ هذا اخلٔار ٍٕس‬
‫تْسٔؼ افيٓقر اخلارجل فُـ أوٓ وآخرا فست جمز ظذ آؿتداء هبؿ يُّْؽ ؾًؾ ذفؽ ـام حيِق فؽ‪.‬‬

‫فتٌٔر تْسٔؼ ما بًد زيارة آرتباط ٕستخدم افٍئة ادزيٍة ‪ a:visited‬ـام يبْٔف ادثال افتايل‪9‬‬
‫{ ‪a:visited‬‬
‫;‪color: red‬‬
‫}‬

‫‪0/1‬‬
 ‫أوامر مخقذمت نهخظميم‬
‫افتحُؿ بنُؾ طٓقر ظْاس افهٍحة‬

‫‪0/2‬‬
0/3
 ‫ّٕقذج افهْدوق‬ ‫‪03‬‬

‫يستحٔؾ ظذ ادهّؿ أن يْجز تهامٔؿ ويب باشتخدام ‪ xhtml‬و ‪ css‬دون أن يتَـ ما يسّك بّْقذج‬
‫افهْدوق‪ ،‬فذا شٖضِب مْؽ أن تُقن مـ أن أصد إتباها ظْد ؿراءة هذا اجلزء مـ افُتاب‪ ،‬ؾْٓا‬
‫يُّـ ؾحق ؿدرات فٌة ‪ - css‬وفُـ ؿبؾ أن ٕدخؾ ذم ظّؼ ادقضقع دظْا ٕبدأ باجلإب افْيري‬
‫وفْتباحث مًا ظـ مٍٓقم ّٕقذج افهْدوق‪-‬‬

‫فَد شبؼ مرارا وتُرار أن وصٍت بًض افقشقم أهنا داخِٔة وظـ أخرى أهنا خارجٔة‪ -‬إذا ـْت تتذـر‬
‫ذفؽ وؾّٓت ـذفؽ ادَهقد ؾْٓٔئا فؽ‪ ،‬وإٓ ؾٓذه ؾرصتؽ فتستدرك ما ؾاتؽ‪-‬‬

‫يًتز افقشؿ خارجل ظْدما يبدأ طٓقر حمتقاه ذم أول افسىر افذي حتت افًْك افسابؼ فف‪ ،‬بْٔام يًتز‬
‫داخع ظْدما ييٓر حمتقاه مُّال فًِْك افسابؼ فف (أي يبدأ حمتقاه حٔث إتٓك حمتقى افًْك افسابؼ‬
‫فف دون افًقدة إػ افسىر)‪ -‬ؾِق أن صٍحة ويب يبدأ بًْقان ‪ h1‬متبقظا بٍَرة ٕص ‪ p‬ؾ٘ن ـال مـ‬
‫افًْقان وؾَرة افْص شٔبدآن ـؾ واحد مْٓام ذم شىر جديد حتت بًوٓام افبًض‪ ،‬وأن ظْدما َٕقم‬
‫ب٘ضاؾة وشؿ ‪ em‬داخؾ افٍَرة ‪ p‬ؾٕ٘ف شٔيٓر حمتقاه ـتابع دحتقى افٍَرة (وهق ـذفؽ ؾًال) دون‬
‫افًقدة إػ افسىر ـام يبْٔف افنُؾ افتايل‪9‬‬

‫افنُؾ ‪0-03‬‬

‫ٕرى جٔدا ذم هذا افنُؾ أن افقشؿ ‪ h1‬تنُؾ ما ينبف افهْدوق وأنف ظْدما أضٍْا افقشؿ ‪ p‬ؾٕ٘ف ؿد‬
‫بدأ حمتقاه ذم أول افسىر افتايل تارـا ؾراؽا بْٔٓا وبغ افًْقان‪ ،‬بْٔام أنف ظْدما أضٍْا افقشؿ ‪ em‬ؾٕ٘ف‬

‫‪0/4‬‬
‫طؾ متابًا دساحة افقشؿ ‪ p‬وهُذا يُقن فديْا ذم هذا افنُؾ وشامن خارجٔان مها ‪ h1‬و‪ p‬ووشؿ‬
‫ثافث داخع هق ‪-em‬‬

‫ٕستْتج مـ هذا أن مٍٓقم افهْدوق يدل ظذ ادساحة افتل يستحقذ ظِٔٓا افقشقم اخلارجل‪ ،‬حٔث‬
‫يتنُؾ فديْا ما ينبف افهْدوق مما يسّح فْا بافتحُؿ هبذه ادساحة ـتًديؾ ضقهلا وظرضٓا‪-‬‬

‫ؿد يتبادر إػ ذهْؽ أن شبب ظدم طٓقر حمتقى افقشؿ ‪ em‬ذم أول افسىر افتايل هق ـقْٕا أضٍْاه‬
‫داخؾ افقشؿ ‪ p‬وفٔس خارجف (بًد >‪ -)</p‬هذا ادْىؼ خاض متاما إذ فق أنْا اشتبدفْا مُان ‪em‬‬
‫بٖي وشؿ آخر مـ ٕقع خارجل ــ ‪ h1‬أو ‪ p‬ؾ٘ن افْص‪" 9‬هذا حمتقى ؾَرة ٕص مائؾ" ـان شٔيٓر ذم‬
‫أول افسىر افتايل‪ ،‬إذا ؾافسبب افقجٔف هق ـقن ‪ em‬هق وشؿ داخع‪-‬‬

‫‪ 03-0‬حجؿ افهْدوق‬

‫أؿهد مـ حجؿ افهْدوق ـؾ مـ افىقل وافًرض ويتؿ حساهبام بقحدة افَٔاس بُسؾ (‪ )px‬أو‬
‫بافْسبة ادئقية (‪ )%‬أما ظـ اخلاصٔتغ ادستخدمتغ فًٍؾ ذفؽ ؾٓام ‪ width‬فتحديد افًرض (يّغ‬
‫يسار) و ‪ height‬فتحديد افىقل (ؾقق فـ حتت)‪-‬‬

‫وجيدر آصارة إػ أن احلجؿ آؾسايض فِهْدوق هل ‪ %0//‬فُؾ مـ افىقل وافًرض فذا ٕرى ذم‬
‫مثال افقشؿ ‪ p‬أن افْص يّأل ـامؾ ظرض وضقل افهٍحة إػ أن يْتٓل افْص اددخؾ ـام هق واضح‬
‫ؾٔام يع‪9‬‬

‫مثال‪9‬‬

‫>‪</p‬ؿؿ باشتبدال هذا افْص بْص ضقيؾ ظذ إؿؾ أربًة أشىر >‪<p‬‬

‫‪0/5‬‬
 ‫افنُؾ ‪1-03‬‬

‫وأن دظْا ٕٖخذ ٍٕس ادثال افسابؼ فُـ هذه ادرة مع افتًديؾ ظذ حجؿ صْدوق افقشؿ ‪ p‬ـام يع‪9‬‬

‫أوامر ‪ CSS‬فتًديؾ حجؿ صْدوق افقشؿ ‪9 p‬‬

‫{ ‪p‬‬
‫;‪width: 400px‬‬
‫;‪height: 100px‬‬
‫;‪text-align: justify‬‬
‫}‬

‫‪0/6‬‬
 ‫افنُؾ ‪2-03‬‬

‫مـ ادُّـ حتديد حجؿ افهْدوق بهٌٔة أخري ظذ افْحقل أيت‪9‬‬

‫‪ 9max-width‬أـز ظرض ممُـ‬ ‫‪‬‬

‫‪ 9min-width‬أصٌر ظرض ممُـ‬ ‫‪‬‬

‫‪ 9max-height‬أـز ضقل ممُـ‬ ‫‪‬‬

‫‪ 9min-height‬أصٌر ضقل ممُـ‬ ‫‪‬‬

‫ظْدما َٕقم بتحديد حجؿ افهْدوق ظذ هذا افْحق (; ‪ )max-width : 400px‬ؾٓذا يًْل أنف ٓ‬
‫يُّـ فِهْدوق أن يتًدى افـ ‪ 3//‬بُسؾ مٓام ـان حجؿ حمتقاه‪ ،‬وذم اجلإب أخر ظْدما َٕقم‬
‫بتحديد حجؿ افهْدوق ظذ افْحق ( ; ‪ )min-width : 400px‬ؾٓذا يًْل أن احلد إدٕك حلجؿ‬
‫افهْدوق هل ‪ 3//‬بُسؾ وٓ يُّـ ذم أي حال مـ إحقال أن يُقن أصٌر مـ ذفؽ (حتك وإن‬
‫ـإت ؾارؽة)‪ ،‬وأخرا جيري هذا ادْىؼ ٍٕسف ظذ خاصٔتل افىقل ‪ max-height‬و ‪min-‬‬
‫‪-height‬‬

‫اخلاصٔة ‪overflow‬‬

‫‪0/7‬‬
‫ذم ادثال افسابؼ إخر تؿ حتديد ضقل افهْدوق بـ ‪ 0//‬بُسؾ فُـ ظْدما ْٕير إػ افْتٔجة (‪)0,03‬‬
‫ٕجد أن ضقل افْص يتًدى افـ ‪ 0//‬بُسؾ ؾٔا ترى أجـ اخلِؾ ؟‬

‫ذم احلََٔة ظْدما َٕقم بتحديد ضقل افهْدوق بحجؿ أؿؾ مـ ادحتقى افتل بداخِف ؾٕ٘ف يتّدد تَِائٔا‬
‫فتقاؾؼ مع حجؿ ادحتقى فذا إن ـْا مكيـ ظذ افىقل ادحدد ؾال بد مـ اشتخدام اخلاصٔة‬
‫‪ overflow‬فِتحُؿ باجلزء افزائد مـ ادحتقى‪ ،‬وتٖخذ احدى افَٔؿ افتافٔة‪9‬‬

‫‪ 9visible‬اطٓار ادحتقى مع متديد ضقل افهْدوق فٔتقاؾؼ مع ضقل ادحتقى‬ ‫‪‬‬

‫(آؾسايض)‬

‫‪ 9hidden‬اخٍاء ادحتقى افزائد (ٓ يالحظ افزائر أي وجقد دحتقى خمٍل)‬ ‫‪‬‬

‫‪ 9scroll‬اضاؾة ذيىتل مترير ‪ ,‬جإبل وحتتل ‪ ,‬يسّحان فِزائر بآضالع ظذ ادحتقى‬ ‫‪‬‬
‫افزائد‪-‬‬

‫‪ 9auto‬أي أوتقماتُٔل وتًْل ترك خٔار إضاؾة ذيىتل افتّرير فِّتهٍح فٔوًٓام ظْد‬ ‫‪‬‬
‫احلاجة‪-‬‬

‫يًتز افَّٔة ‪ auto‬هل إحسـ مـ بغ افُؾ وافسبب واضح جدا بافْسبة فَِّٔتغ ‪ visible‬و‬
‫‪ hidden‬أما بافْسبة فَِّٔة ‪ scroll‬ؾألنف ظْدما َٕقم باختٔارها ؾ٘ن ادتهٍح يَقم مباذة ب٘ضاؾة‬
‫افؼيىتغ اجلإبل وافسٍع شقاء ـإت هْاك حمتقى زائدة أم ٓ أما ظْد اختٔار افَّٔة ‪ auto‬ؾافٌافب‬
‫أن ادتهٍح شَٔقم ب٘ضاؾة افؼيط اجلإبل دون افؼيط افسٍع وذفؽ ؾَط ظْدما يُقن هْاك حمتقى‬
‫زائدة ـام يقضحٓا ادثال افتايل‪9‬‬
‫{ ‪p‬‬
‫;‪width: 400px‬‬
‫;‪height: 100px‬‬
‫;‪overflow: auto‬‬
‫;‪text-align: justify‬‬
‫}‬

‫‪0/8‬‬
 ‫افنُؾ ‪3-03‬‬

‫‪ 03-1‬حدود افهْدوق‬

‫يقؾر فْا ‪ css‬إمُإٔة وضع حدود ٕي صْدوق وـذفؽ افتحُؿ بْقع وحجؿ وفقن تِؽ احلدود أو‬
‫حتك وضع حدود ذم بًض جقإب افهْدوق دون اجلقإب إخرى ـٖن توع حد فِجإب إجّـ‬
‫ؾَط أو اجلإب إجرس مع افَسؿ افًِقي‪-‬‬

‫فِتحُؿ بحدود افهْدوق ٕستخدم ثالث خاصٔات هل ‪ border-width‬حلجؿ احلدود و‬

‫‪ border-style‬فْقع احلدود وأخرا ‪ border-color‬فِقن وفْبدأ بـ‪9‬‬

‫‪ 03-1-0‬احلجؿ‬

‫يُّـ خلاصٔة حجؿ احلدود ‪ border-width‬أن تٖخذ ؿّٔتٓا إما مـ افَٔؿ افَٔاشٔة ادًرؾة مسبَا‬
‫ذم فٌة ‪ css‬أو أن تٖخذ ؿّٔة رؿّٔة بقحدة افَٔاس بُسؾ ‪ -px‬و افَٔؿ افَٔاشٔة هل‪9‬‬

‫‪ 9thin‬صٌر (تًادل ‪ 0‬بُسؾ ذم متهٍح ؾرؾُس وؽقؽؾ ـروم بْٔام تًادل ‪ 1‬بُسؾ ذم إسٕت‬
‫إـسبِقرر)‬

‫‪00/‬‬
‫‪ 9 medium‬متقشط (تًادل ‪ 2‬بُسؾ ذم متهٍح ؾرؾُس وؽقؽؾ ـروم بْٔام تًادل ‪ 3‬بُسؾ ذم‬
‫إسٕت إـسبِقرر)‬

‫‪ 9 thick‬ـبر (تًادل ‪ 4‬بُسؾ ذم متهٍح ؾرؾُس وؽقؽؾ ـروم بْٔام تًادل ‪ 5‬بُسؾ ذم إسٕت‬
‫إـسبِقرر)‬

‫مالحية‪ 9‬ظْدما يتؿ حتديد حجؿ احلدود ؾٕ٘ف ٓ يُقن فف أي تٖثر حتك يتؿ حتديد افْقع فُـ افًُس‬
‫ظْدما يتؿ حتديد افْقع دون احلجؿ ؾادتهٍح يًتز أن احلجؿ ادحدد هق ‪ medium‬أي ‪ 2‬بُسؾ ذم‬
‫متهٍح ؾرؾُس وؽقؽؾ ـروم أو ‪ 3‬بُسؾ ذم متهٍح إسٕت اـسبِقرر‪-‬‬

‫مثال‪9‬‬
‫{ ‪p‬‬
‫;‪border-width: medium‬‬
‫}‬

‫بام أنف ٓ يُّـ هلذا ادثال أن يًىل أي ٕتٔجة طاهرة ظذ ادتهٍح ؾ٘ين أجدين موىرا أن أتحدث ظـ‬
‫حتديد ٕقع احلدود ثؿ أؿقم بًدها برسد ادثال افنامؾ‪-‬‬

‫‪ 03-1-1‬افْقع‬

‫يُّـ خلاصٔة حتديد ٕقع احلدود (‪ )border-style‬أن تٖخذ ؿّٔة واحدة مـ بغ ثامن أنقاع خمتٍِة‬
‫فِحدود هل ـام يبْٔٓا افهقرة افتافٔة حٔث ييٓر ـؾ ؿّٔة ممُـ داخؾ صْدوق متثؾ ٕتٔجتٓا افًٍع‬
‫ظذ ادتهٍح‪9‬‬

‫‪000‬‬
 ‫افنُؾ ‪4-03‬‬

‫أن يُّْْا آتٔان بّثال فُال اخلاصٔتغ وشْستخدم ٍٕس أوامر ادثال ‪ 14‬مع تًديؾ مِػ افتْسٔؼ‬
‫‪ css‬فتهبح ـام يع‪9‬‬
‫{ ‪p‬‬
‫;‪width: 400px‬‬
‫;‪text-align: justify‬‬
‫;‪Border-width: 2px‬‬
‫;‪Border-style: solid‬‬
‫}‬

‫ما هيّْا هْا مها اخلاصٔتان أخرتان حٔث ؿد شبؼ وحتدثْا ظـ اخلاصٔتغ إوفٔتغ‪ -‬ؿّْا ذم إوػ‬
‫(‪ )Border-width‬بتحديد حجؿ وشامـة احلدود بـ ‪ 1‬بُسؾ أما ذم افثإٔة ؾَد ؿّْا بتحديد افْقع‬
‫‪( solid‬أي متامشؽ) ـام يبْٔف افْتٔجة افتافٔة‪9‬‬

‫‪001‬‬
 ‫افنُؾ ‪5-03‬‬

‫شبؼ وأذت أنف يُّـ اضاؾة حدود ذم جٓة دون إخرى‪ ،‬وفًٍؾ ذفؽ ٕستخدم ـِّة ‪ border‬ثؿ‬
‫اجلٓة ادراد إضاؾة احلدود هلا ثؿ ـِّة ‪ ،width‬وبام أن جٓات افهْدوق أربًة ؾسٔتقفد فديْا أربع‬
‫خهائص ؾرظٔة خاص بتحديد حجؿ اإلضار هل‪9‬‬

‫‪ 9border-left-width‬شامـة إضار افٔسار‬

‫‪ 9border-right-width‬شامـة إضار افّٔغ‬

‫‪ 9border-top-width‬شامـة إضار إظذ‬

‫‪ 9border-bottom-width‬شامـة إضار إشٍؾ‬

‫فتحديد ٕقع اضار جلٓة دون أخرى أو فتحديد أنقاع خمتٍِة ذم ٍٕس افهْدوق يُّـ اتباع ٍٕس‬
‫إشِقب افسابؼ مع اخلاصٔة ‪ border-style‬وفتُـ مثال ‪ border-left-style‬فتحقيؾ ٕقع‬
‫اضار افّٔغ وهُذا مع باؿل اجلٓات‪ ،‬ـام ذم ادثال افتايل‪9‬‬
‫{ ‪p‬‬
‫;‪width: 400px‬‬
‫;‪text-align: justify‬‬
‫;‪Border-top-width: 2px‬‬

‫‪002‬‬
 Border-top-style: solid;
Border-right-width: 6px;
Border-right-style: dotted;
Border-bottom-width: 4px;
Border-bottom-style: dashed;
Border-left-width: 3px;
Border-left-style: double;
}

9‫افْتٔجة‬

6-03 ‫افنُؾ‬

‫ٓ هتتؿ ـثرا بافْتٔجة ؾٓدف هذا ادثال فٔس ٕتٔجتف بؾ افْير إػ ـثرة إوامر ادُتقبة فِحهقل ظذ‬
‫ وفُل أخزك أنف يُّـ اختهار تِؽ افتُرارات ادِّة ذم شىريـ بسٔىغ مع‬،‫هذه افْتٔجة افبسٔىة‬
9‫آبَاء ظذ ٍٕس افْتٔجة‬
p {
width: 400px;
text-align: justify;
border-width: 2px 6px 4px 3px;
border-style: solid dotted dashed double;

003
‫}‬

‫شقاء اؿتًْت أم ٓ ؾٓذه إوامر تٗدي فٍْس ٕتٔجة إوامر افسابَة وفتٍٓؿ ذفؽ دظْل أؿًْؽ‪ -‬ذم‬
‫اجلِّة ‪ border-width:2px 6px 4px 3px‬ؿّْا ب٘ظىاء أربع ؿٔؿ خمتٍِة فِخاصٔة ‪border-‬‬
‫‪ width‬ـؾ ؿّٔة تنر إػ شامـة أحد جٓات افهْدوق بدءا مـ‪ 9‬ؾقق‪,‬يّغ‪,‬حتت‪,‬يسار حسب‬
‫افستٔب ما يًْل أن شامـة اضار إظذ ‪ 2px‬وافّٔغ ‪ 6px‬وافسٍع ‪ 4px‬وأخرا افٔسار يساوي ‪3px‬‬
‫ويُّْؽ اتباع ٍٕس إشِقب فتحِٔؾ ؿٔؿ افسىر افثاين مـ إوامر افسابَة‪ ،‬ثؿ دمربة إوامر افتافٔة‬
‫فِتّرن‪-‬‬

‫;‪border-style: dotted solid double dashed‬‬

‫‪ 9dotted‬ؾقق‬

‫‪ 9solid‬يّغ‬

‫‪ 9double‬حتت‬

‫‪ 9dashed‬يسار‬

‫;‪border-style: dotted solid double‬‬

‫‪ 9dotted‬ؾقق‬

‫‪ 9solid‬يّغ‪,‬يسار‬

‫‪ 9double‬حتت‬

‫;‪border-style: dotted solid‬‬

‫‪ 9dotted‬ؾقق‪,‬حتت‬

‫‪ 9solid‬يّغ‪,‬يسار‬

‫;‪border-style: dotted‬‬

‫‪ 9dotted‬اجلّٔع‪ 9‬ؾقق‪,‬يّغ‪,‬حتت‪,‬يسار‬

‫‪004‬‬
‫مالحية‪ 9‬ظْدما يتؿ إضاؾة رابىة باشتخدام صقرة ؾٕ٘ف يتؿ وضع حدود ظذ افهقرة تَِائٔا‪ ،‬وذم حال‬
‫رؽبْا ب٘زافتٓا ‪ ,‬وهذا افٌافب ‪ ,‬ؾْٕ٘ا َٕقم باشتخدام اخلاصٔة ‪ border-style‬مع افَّٔة ‪none‬‬
‫وهُذا َٕقم بافتخِص مـ احلدود‪-‬‬

‫‪ 03-1-2‬افِقن‬

‫ٕستخدم اخلاصٔة ‪ border-color‬فتًٔغ فقن احلدود وتًّؾ متاما ـاخلاصٔة ‪ color‬مـ حٔث‬
‫افَٔؿ‪ ،‬ويْبٌل اإلصارة إػ أن إشافٔب افتل حتدثْا ظْٓا ذم افٍَرة افسابَة ظـ ‪ border-width‬و‬
‫‪ border-style‬ـِٓا يُّـ أن تًّؾ مع ‪-border-color‬‬
‫{ ‪p‬‬
‫;‪border-color: #FFAABB99‬‬
‫}‬

‫‪ 03-1-3‬اختهار أوامر تْسٔؼ احلدود‬

‫مـ ادُّـ اختهار مجٔع خهائص افتحُؿ باحلدود بىريَة شِٓة وواضحة‪ ،‬ويتّثؾ ذفؽ ذم مجع‬
‫مجٔع خهائص احلدود ذم مجِة واحدة‪ ،‬شقاء أردٕا إضاؾة احلدود جلّٔع جقإب افهْدوق أو فبًض‬
‫جقإبف‪.‬‬

‫ظْد مالحية خهائص ‪ css‬اخلاص بافتحُؿ باحلدود ٕجد أن مجًٔٓا تبدأ بُِّة ‪( border‬أي إضار)‬
‫تِٔٓا اشؿ ٕقع افتحُؿ ادراد تًديِف ــ ‪ width‬مثال فتحديد شامـة آضار أو ‪ style‬فتًٔغ ٕقظف‪،‬‬
‫ؾافٍُرة إذا هل‪ 9‬بام أن مجٔع هذه اخلهائص تبدأ بُِّة ‪ border‬ؾِؿ ٓ ٕجًؾ ـِّة ‪border‬‬
‫خاصٔة رئٔسٔة دمّع ؿٔؿ خهائهٓا افٍرظٔة؟ هذا ما تؿ بافًٍؾ حٔث يقؾر ‪ css‬إمُإٔة اشتخدام‬
‫ـِّة ‪ border‬وحدها ـًّرف جلّٔع خهائص افتحُؿ باحلدود تُقن ؿّٔٓا هل ٍٕس ؿٔؿ تِؽ‬
‫اخلهائص مٍهال بْٔٓا بّساؾة بدء مـ شامـة آضار ثؿ افْقع وأخرا افقن ـام هق مبغ ذم ادثال‬
‫افتايل‪9‬‬
‫{ ‪p‬‬
‫;‪Border: 5px solid red‬‬
‫}‬

‫‪005‬‬
‫ذم هذا ادثال شٔتؿ حتديد حدود جلّٔع جقإب افهْدوق بسامـة متساوية هل ‪ 5px‬مـ افْقع‬
‫ادتامشؽ ‪ solid‬وييٓر بافِقن إمحر ‪ -red‬أما فِتًامؾ مع جٓة مًْٔة ؾْٕ٘ا ٕذـر ‪ border‬متبقظا‬
‫باجلٓة ادراد ـام ذم ادثال افتافٔة‪9‬‬
‫{ ‪p‬‬
‫;‪border-left: medium dotted green‬‬
‫}‬

‫ذم هذا ادثال تؿ حتديد حدود افٔسار بسامـة متقشىة (‪ )medium‬مـ ٕقع اخلط ادَْط (‪)dotted‬‬
‫وبافِقن إخرض‪ ،‬وذم حال أردٕا حتديد احلدود فٌر جإب افٔسار ٕبدل ـِّة ‪ left‬بُِّة ‪top‬‬
‫(إظذ) أو ـ‪( bottom‬إشٍؾ) أو ‪( right‬افّٔغ)‪-‬‬

‫ؾائدة‪ 9‬إذا تؿ اشتخدام ‪ border‬إلضاؾة حدود جلّٔع جقإب افهْدوق ؾّـ ادُّـ اشتخدام‬
‫‪ border‬أشٍِٓا مباذة مع أحد اجلٓات ثؿ إظىائٓا افَّٔة ‪ none‬فسك تِؽ اجلٓة دون حدود‬
‫وهُذا ييٓر احلدود ذم اجلقإب افثالثة ؾَط‪-‬‬

‫‪ 03-2‬احلنق واحلاصٔة‬

‫يًد احلنق واحلاصٔة مـ أصًب ادٍاهٔؿ افتل حير مًيؿ متًِّل ‪ css‬بافرؽؿ أهنا بسٔىة جدا وؽر‬
‫مًَدة إٓ أن ظدم ؾٓؿ ديْامُٔٔة ظِّٓام يٗدي بافْٓاية إػ احلرة وافتًَٔد وحتك ٕتجْب ذفؽ دظْل‬
‫أؿقل فؽ أن احلنق يتؿ ظِّٓا داخؾ افًْك وحمتقاه أما احلاصٔة ؾٔتؿ خارج افًْك مع ما جياوره‬
‫بجقإبف إربًة شقاء ظْاس أم جقإب افهٍحة افُع وافنُؾ افتايل يقضح ذفؽ‪9‬‬

‫‪006‬‬
 ‫افنُؾ ‪7-03‬‬

‫يرمز ادستىٔؾ افُبر ذم هذا افنُؾ إػ متهٍح افقيب بْٔام ادستىِٔتغ داخِف ترمزان إػ ظْكيـ‬
‫(صْدوؿغ)‪ -‬واحلاصٔة اخلارجٔة تنر إفٔٓا افسٓام افُبرة‪ -‬وهل شبًة‪ ،‬شتة مْٓا ترمز إػ احلاصٔة بغ‬
‫احدى جٓات افًْكيـ مع اضار ادتهٍح (ادستىٔؾ افُبر)‪ ،‬أما افسٓؿ افسابع ذم افقشط ؾٔنر إػ‬
‫حاصٔة خارجل أجوا فُـ بغ افًْكيـ‪ -‬وأخرا تنر ـؾ أربًة أشٓؿ ذم ـؾ مـ ادستىِٔتغ إػ‬
‫احلنق داخؾ ـؾ ظْك‪-‬‬

‫ٕستخدم اخلاصٔة ‪ margin‬فتحديد احلاصٔة اخلارجٔة‪ ،‬وٕستخدم اخلاصٔة ‪ padding‬فتحديد احلنق‬

‫افداخع‪ ،‬وفِتقضٔح أـثر دظْا َٕقم بتىبٔؼ افنُؾ افسابؼ ذم مثال ؾًع‪-‬‬

‫ذم افبداية شْحتاج إػ مِػ ‪ xhtml‬مع ظْكيـ ‪ p‬مع شىريـ ٕص ظذ إؿؾ‪ -‬أما ذم مِػ افتْسٔؼ‬
‫‪ CSS‬ؾسَْقم بتحديد حجؿ افهْدوق بـ ‪ 3//‬بُسؾ مع إضاؾة حدود فِهْدوق وأخرا َٕقم‬
‫بوبط افْص‪-‬‬

‫مِػ ‪9 xhtml‬‬

‫‪007‬‬
‫>‪</p‬ؿؿ باشتبدال هذا افْص بْص ضقيؾ ظذ إؿؾ شىريـ >‪<p‬‬

‫>‪</p‬ؿؿ باشتبدال هذا افْص بْص ضقيؾ ظذ إؿؾ شىريـ >‪<p‬‬

‫مِػ ‪9CSS‬‬
‫{ ‪p‬‬
‫;‪width: 400px‬‬
‫;‪Border: 2px solid‬‬
‫;‪text-align: justify‬‬
‫}‬

‫افْتٔجة‪9‬‬

‫افنُؾ ‪8-03‬‬

‫ٕالحظ مـ افنُؾ ‪ 2,03‬ظدم وجقد حنق داخع ذم ـال افًْكيـ وهذا ما جًؾ افْص يِتهؼ‬
‫باحلدود‪ ،‬أما ظـ احلاصٔة اخلارجٔة ؾْٓاك حاصٔة اؾساضٔة يتؿ إضاؾتف بغ افًْاس بَّدار ‪ 2px‬وهذا‬
‫ما جًؾ افًْكيـ ‪ p‬يٍْهالن ظـ ببًوٓام افبًض ـام أنف يسّح بافًقدة ٕول افسىر بافْسبة‬
‫فِقشقم اخلارجل‪-‬‬

‫وأن إلضاؾة حنق داخع فِّثال افسابؼ ؿؿ ب٘ضاؾة افسىر افتايل ذم مِػ افتْسٔؼ ‪9CSS‬‬
‫;‪padding: 14px‬‬

‫‪008‬‬
‫بًد تىبٔؼ افتْسٔؼ اجلديد ٕالحظ ذم افنُؾ ‪ 3,03‬ابتًاد افْص مـ احلدود بَّدار احلنق ادواف‬
‫(‪-)14px‬‬

‫افنُؾ ‪0/-03‬‬

‫وأخرا ؿؿ ب٘ضاؾة افسىر افتايل ذم مِػ افتْسٔؼ إلضاؾة حاصٔة خارجٔة‪9‬‬

‫;‪margin: 40px‬‬

‫ٕالحظ هذه ادرة أجوا ذم افنُؾ ‪ 4,03‬تباظد افًْكيـ ظـ حمٔط ادتهٍح وـذفؽ بًدمها ظـ‬
‫بًوٓا افبًض‪-‬‬

‫‪01/‬‬
 ‫افنُؾ ‪00-03‬‬

‫وجيدر بْا آصارة أنف ظْدما َٕقم ب٘ضاؾة احلنق واحلاصٔة ظذ افْحق افذي ؾًِْاه إٍٓا ؾ٘ن ادَدار‬
‫ادحدد يتؿ حتديده ظذ اجلقإب إربًة فًِْك‪ ،‬ؾٍل مثال احلنق افسابؼ يتؿ ابًاد افْص مـ حدود‬
‫افًْك بَّدار ‪ 03‬بُسؾ فُؾ جإب‪-‬‬

‫ثؿ جيب أن ًِٕؿ أنف يُّـ إضاؾة حنق أو حاصٔة إلحدى اجلقإب دون إخرى وذفؽ بّجرد‬
‫اشتخدام ‪ padding-‬أو ‪ margin-‬مع احدى اجلقإب‪ -‬وبام أنْا ِّٕؽ خاصٔتغ تًّؾ ـؾ واحدة‬
‫مْٓام مع أربًة جقإب ؾسْٔن فديْا أربع خهائص ؾرظٔة فُؾ خاصٔة هل ـافتايل‪9‬‬

‫خهائص احلنق‪:‬‬

‫‪ 9padding-top‬حنق إظذ‬ ‫‪‬‬

‫‪ 9padding-right‬حنق افّٔغ‬ ‫‪‬‬

‫‪ 9padding-bottom‬حنق إشٍؾ‬ ‫‪‬‬

‫‪ 9padding-left‬حنق افٔسار‬ ‫‪‬‬

‫خهائص احلاصٔة‬

‫‪ 9margin-top‬حاصٔة إظذ‬ ‫‪‬‬

‫‪010‬‬
 ‫‪ 9margin-right‬حاصٔة افّٔغ‬ ‫‪‬‬

‫‪ 9margin-bottom‬حاصٔة إشٍؾ‬ ‫‪‬‬

‫‪ 9margin-left‬حاصٔة افٔسار‬ ‫‪‬‬

‫ؾائدة‪ 9‬إن اخلاصٔة ‪ margin-left‬تنبف اخلاصٔة ‪ text-indent‬افتل تستخدم إلزاحة افْص مع‬
‫ؾارق بسٔط ٓ تيٓر إٓ ظْدما يتؿ إضاؾة حدود فِهْدوق ادراد إزاحتف ؾًْدها إذا اشتخدمْا ‪text-‬‬
‫‪ indent‬شٔتؿ إزاحة ادحتقى ؾَط بْٔام إذا اشتخدمْا ‪ margin-left‬شٔتؿ إزاحة ادحتقى مع‬
‫احلدود اخلاص بف فذا يُّْؽ آشتٍادة مـ هذه احلِٔة ظْدما تريد إزاحة صْدوق ٕيص حيتقي ظذ‬
‫حدود‪-‬‬

‫‪ 03-3‬تقشٔط افهْدوق‬

‫ؿبؾ افؼوع ذم تقشٔط أي صْدوق ؾال بد مـ تًٔغ حجؿ ظرضف (‪ )width‬ؾُام شبؼ وؿِْا إن أي‬
‫صْدوق مل خيهص فًرضف أي حجؿ مًغ ؾ٘ن حجؿ ظرضف آؾسايض شُٔقن ‪ %0//‬وبافتايل‬
‫يستحقذ ظذ ظرض ـامؾ افهٍحة إن ـإت افقشؿ إب فف هق ‪ ،body‬أو يستحقذ ظذ ـامؾ ظرض‬
‫افقشؿ إب اخلاص بف‪ -‬وفَْؾ مثال أنْا ِّٕؽ صٍحة ويب بداخِف وشؿ ‪ div‬بًد افقشؿ ‪body‬‬
‫مباذة ثؿ يقجد وشؿ ‪ h2‬ذم داخؾ وشؿ افـ ‪ ،div‬إذا يُقن وشؿ افـ ‪ div‬ابْا فِقشؿ ‪ body‬وذم ٍٕس‬
‫افقؿت يُقن هق افقشؿ إب اخلاص بافقشؿ ‪-h2‬‬
‫>‪<body‬‬
‫>‪<div‬‬
‫>‪<h2‬‬ ‫>‪</h2‬‬
‫>‪</div‬‬
‫>‪</body‬‬

‫ظْدما ٓ َٕقم بتًٔغ ظرض افقشؿ ‪ div‬يتخذ مـ ظرض ادتهٍح ظرضا اؾساضٔا فف (أي ‪-)100%‬‬
‫وبافْسبة فِقشؿ ‪ h2‬وباظتبار احلافة إوػ (أي ظدم تًٔغ ظرض افقشؿ إب ‪ )div‬ؾ٘ن ‪ h2‬شٔتخذ‬
‫مـ ظرض افقشؿ إب ‪ div‬ظرضا اؾساضٔا فف‪ ،‬ما يًْل أنف هق أجوا شُٔقن ظرضٓا ظرض افهٍحة‬

‫‪011‬‬
‫‪ 100%‬أما فق تؿ تًٔغ ظرض افقشؿ ‪ div‬بـ ‪ 2//‬بُسؾ ؾ٘ن افًرض آؾسايض فِقشؿ ‪ h2‬شٔهبح‬
‫هذه ادرة ‪ 2//‬بُسؾ‪ ،‬ذيىة ظدم تًٔغ ظرض هذا إخر بحجؿ آخر‪-‬‬

‫فْ ًُد أن إػ مقضقظْا ‪ ،‬ـٔػ َٕقم بتقشٔط افهْدوق ؟ حسْا‪ ،‬فـ ٕستخدم خهائص جديدة بؾ‬
‫شْستخدم اخلاصٔة افتل أهنْٔا دراشتٓا فِتق‪ًٕ -‬ؿ شْستخدم اخلاصٔة ‪ margin‬مع افَّٔة أوتقماتُٔل‬
‫‪ auto‬حٔث شَٔقم ادتهٍح بحساب ادساحة ادتبَٔة بًد ضرح حجؿ ظرض افهْدوق ثؿ يَقم‬
‫بتَسٔؿ هذه ادساحة إػ ؿسّغ متساوتغ يؤٍٓام أوتقماتُٔٔا ـحاصٔة فِّٔغ وافٔسار وهُذا‬
‫يتقاجد افهْدوق ذم وشط افهٍحة‪-‬‬

‫فتجربة هذا ادقضقع ؿؿ باشتخدام مثال افنُؾ ‪ 4,03‬مع تًديؾ ؿّٔة اخلاصٔة ‪ margin‬إػ ‪auto‬‬
‫ـام يع‪9‬‬
‫;‪margin: auto‬‬

‫افنُؾ ‪01-03‬‬

‫ماذا ؟ أجـ ذهب احلاصٔة بغ افًْكيـ ؟ حاذا افًْكيـ افتهَا ؟ بافًٍؾ ـْت ؿد ٕسٔت أن أخزك‬
‫أن افَّٔة ‪ auto‬تَسؿ مساحة افًرض ؾَط وفٔس افىقل‪ ،‬وأشقء مـ هذا جيًؾ حاصٔة إظذ‬
‫وإشٍؾ صٍر‪ ،‬فُـ ٓ ظِٔؽ يُّـ إظادة احلاصٔة بغ افًْكيـ ومْع افتهاؿٓام ظـ ضريؼ إضاؾة‬
‫ؿّٔة احلاصٔة ؿبؾ افَّٔة ‪ auto‬ـام يع‪9‬‬

‫‪012‬‬
‫‪margin: 4px‬‬ ‫;‪auto‬‬

‫جرب ادثال بٍْسؽ بًد افتًديؾ وشتالحظ وجقد حاصٔة بَّٔة ‪ 3‬بُسؾ بغ افًْكيـ‪-‬‬

‫‪ 03-4‬إمافة افًْاس‬

‫‪ 03-4-0‬حتقيؾ ظْك مـ ٕقع داخع إػ خارجل وافًُس‬

‫حتدثْا أـثر مـ مرة ظـ افقشقم افداخِٔة واخلارجٔة فذا ٓ تْتير مْل أن أذحٓا فؽ أن ـؾ ما‬
‫شٖؿقم بف هْا هق تًِّٔؽ ـٔػ تتحدى ؿقاظد ‪ xhtml‬ؾتتحُؿ هبا ظذ مزاجؽ ؾّثال‪ 9‬افقشؿ ‪img‬‬
‫هق وشؿ داخع فُـ ماذا فق أردت أن دمًِف خارجل يًْل‪ 9‬ينُؾ صْدوؿا بذاتف ويًقد ٕول‬
‫افسىر؟ أو ماذا فق أردت أن دمًؾ مـ افقشؿ اخلارجل <‪ >h2‬وشام داخع ييٓر حٔث إتٓك طٓقر‬
‫افًْك افسابؼ فف؟ بافىبع ـؾ ذفؽ ممُـ دون حدوث أجة مًجزة ـؾ ما ظِٔؽ ؾًِف هق اشتخدام‬
‫اخلاصٔة ‪ display‬ذم مِػ افتْسٔؼ مع احدى افَّٔتغ افتافٔتغ‪9‬‬

‫‪ 9block‬فتحقيؾ ظْك داخع إػ ظْك خارجل‬

‫‪ 9inline‬فتحقيؾ ظْك خارجل إػ ظْك داخع‬

‫فتجربة هذه اخلاصٔة ؿؿ بٕ٘ناء صٍحة ‪ xhtml‬ثؿ أضػ داخِٓا ظْكيـ مـ ٕقع داخع وفتُـ مثال‬
‫صقرتغ‪ ،‬ثؿ ؿؿ بتجربة افهٍحة وشتالحظ طٓقر افهقرتغ أمام بًوٓام افبًض‪ ،‬ثؿ ؿؿ ذم مرحِة‬
‫ثإٔة بتحقيؾ افهقرة افثإٔة مـ ٕقع داخع إػ خارجل ذم مِػ افتْسٔؼ وشتالحظ ظْد افتجربة أن‬
‫افهقرتغ شتيٓران حتت بًوٓام افبًض وذفؽ ٕن ادتهٍح شًٔامؾ افهقرة افثإٔة ظذ أنف وشؿ‬
‫خارجل وبافتايل تنُؾ ما ينبف افهْدوق وظقدهتا إػ أول افسىر‪-‬‬

‫‪ 03-4-1‬تىبٔؼ إمافة ظذ ظْك‬

‫ؿِْا أنف ظْدما يتؿ إضاؾة ظْك ذات وشؿ خارجل ييٓر حمتقاه تَِائٔا أول افسىر ما يًْل أنف ؿد تسك‬
‫ؾراؽات ذم إشىر افتل تسبؼ تِؽ افًْك خاصة إذا ما ـإت حمتقى افًْك افذي ؿبِف ؿهر جدا‬
‫فذا ؿد ًّٕد إػ اشتخدام اإلمافة ٓشتٌالل افٍراغ ادقجقد‪ ،‬وذم بًض إحٔان ًّٕد إػ ذفؽ ؾَط‬

‫‪013‬‬
‫جلًؾ ادحتقى تيٓر بنُؾ مجٔؾ‪ -‬ذم افنُؾ افتايل مثال ٕرى ـٔػ ييٓر افْص حتت افهقرة تارـة‬
‫ؾراؽا ـبرا يسار افهقرة‪9‬‬

‫افنُؾ ‪02-03‬‬

‫إذا أردٕا اطٓار افْص بجإب افهقرة وبافتايل افتخِص مـ افٍراغ ادقجقد ؾْٕ٘ا ٕستخدم خاصٔة‬
‫اإلمافة وهل ‪ float‬ثؿ ًٕىٔف أحد افَّٔتغ افتافٔتغ‪9‬‬

‫‪ 9right‬إلمافة افًْك ٕحق افّٔغ‬

‫‪ 9left‬إلمافة افًْك ٕحق افٔسار‬

‫فتجربة هذه اخلاصٔة شْستخدم أوامر ‪ xhtml‬اخلاص بافنُؾ افسابؼ‪ ،‬ثؿ َٕقم بتىبٔؼ إمافة ظذ‬
‫افهقرة ٕحق افّٔغ بحٔث تيٓر افْص ذم يسارها ـام يع‪9‬‬

‫أوامر ‪( 9xhtml‬هذه إوامر تًىل ٕتٔجة افنُؾ ‪)6,03‬‬

‫>‪</h2‬جزر افَّر وادٗامرة ظذ مايقت>‪<h2‬‬

‫جزيرة "=‪<img src="image/mayotte.png" class="imala" alt‬‬

‫>‪"/‬مايقت‬

‫‪014‬‬
‫>‪<p‬‬ ‫>‪ </p‬ؿؿ باشتبدال هذا افْص بْص ضقيؾ ظذ إؿؾ أربًة أشىر‬

‫أوامر ‪9CSS‬‬
‫{ ‪.imala‬‬
‫;‪float: right‬‬
‫;‪padding-left: 5px‬‬
‫}‬

‫افْتٔجة‪9‬‬

‫افنُؾ ‪03-03‬‬

‫ذم هذا ادثال تؿ افتحُؿ بافًْك فٔتؿ إزاحتف ٕحق افٔسار ‪ left‬فذا بدأ طٓقر افْص مـ جٓة افّٔغ أما‬
‫فق ـان ؿّٔة ‪ float‬هق ‪ right‬ـان شَٔقم ادتهٍح ب٘زاحة افهقرة فِّٔغ وافْص فِٔسار‪ -‬يرجك‬
‫ادالحية أنْل ؿّت بوبط افْص ظـ ضريؼ اخلاصٔة ‪-text-align‬‬

‫‪ 03-4-2‬إيَاف آمافة‬

‫ظْدما َٕقم بتىبٔؼ إزاحة فًْك ما ؾُٖنْا َٕرر أن يُقن افًْك افذي ئِف بجإبف متاما فُـ ذم حال مل‬
‫تستقل تِؽ افًْك ظذ ـامؾ ادساحة افٍارؽة ادقجقدة ؾتَِائٔا يَقم ‪ CSS‬بتىبٔؼ ٍٕس اإلزاحة‬
‫ظذ افًْك افتايل ؾافذي ئِف إػ أن يتؿ مِ ـامؾ افٍراغ‪-‬‬

‫‪015‬‬
‫باظ تبار أنْا ؿّْا بتًديؾ ادثال افسابؼ بحٔث أضٍْا آخره ظْقان وؾَرة ٕص ؾٔا ترى ـٔػ شُٔقن‬
‫اديٓر اجلديد ؟ بال صؽ شٔيٓر افًْقان حتت افٍَرة افسابَة مباذة وبجإب افهقرة ثؿ ان مل يّتِ‬
‫ادساحة جإب افهقرة ؾسٔتبًف افْص ذم ذفؽ ـام ذم افنُؾ افتايل‪9‬‬

‫افنُؾ ‪04-03‬‬

‫ٓ أدري ان ـإت تًجبؽ طٓقر افهٍحة هبذا افنُؾ فُـ أؤـد فؽ أن بًض إصخاص شٍٔوِقن‬
‫فق تؿ اطٓار افًْقان افثاين مع ؾَرة افْص حتت افهقرة مباذة‪ ،‬وهذا ما يسّح بف اخلاصٔة ‪clear‬‬
‫افتل تستخدم بًد اشتخدام شابؼ خلاصٔة آمافة (‪ )float‬هبدف ايَاف افتىبٔؼ افتَِائل فإلمافة ظذ‬
‫افًْاس افتابع فًِْك اد ُ َامل‪ -‬ويُّـ هلذه اخلاصٔة أن تٖخذ احدى افَٔؿ افثالثة افتافٔة‪9‬‬

‫‪ 9left‬يسار‪,‬يًْل شٔتؿ اطٓار افًْك احلايل ذم افٔسار حتت افًْك افسابؼ فف مباذة إذا‬ ‫‪‬‬
‫ـإت إمافتف ٕحق افٔسار ( ‪-)float :left‬‬

‫‪ 9right‬يّغ‪ ,‬يًْل شٔتؿ اطٓار افًْك احلايل ذم افّٔغ حتت افًْك افسابؼ فف إذا ـإت‬ ‫‪‬‬
‫إمافتف ٕحق افّٔغ (‪-) float :right‬‬

‫‪ 9both‬أما هذه ؾتًّؾ مع افَّٔتغ مًا بحٔث إذا ـإت إمافة افًْك افسابؼ ٕحق افٔسار‬ ‫‪‬‬
‫ؾسٔيٓر افًْك احلايل حتتف ذم افٔسار أما إذا ـإت إمافتف ٕحق افّٔغ ؾسٔيٓر حتتف ذم‬
‫افّٔغ‪-‬‬

‫‪016‬‬
‫خالصة افَقل هق أنْا ٕستخدم ‪ clear :left‬مع افًْك احلايل إذا ـإت إمافة افًْك افسابؼ‬
‫‪ float :left‬بْٔام ٕستخدم ‪ clear :right‬إذا ـإت آمافة ‪ ،float :right‬أما إذا ـْا ٓ ًٕرف ٕقع‬
‫آمافة ادىبَة ذم افًْك افسابؼ أو أنْا ٕريد تسٓٔؾ ادّٓة ؾْستخدم ‪ clear :both‬وهُذا يَقم‬
‫ادتهٍح بّقاؾَة ‪ float :left‬مع ‪ clear :left‬و ‪ float :right‬مع ‪-clear :right‬‬

‫وأخرا فِّثال يُّْْا ايَاف امافة افًْقان افثاين ذم ادثال افسابؼ ظـ ضريؼ اضاؾة افتْسٔؼ افتايل‬
‫باظتبار أنف تؿ حتديد خاصٔة ‪ class‬ذات افَّٔة ‪ ikaf_imala‬ظذ افًْقان افثاين ذم مِػ افهٍحة‪9‬‬
‫{ ‪.ikaf_imala‬‬
‫;‪clear: both‬‬
‫}‬

‫وشُٔقن افْتٔجة ـام يع‪9‬‬

‫افنُؾ ‪05-03‬‬

‫ظْدما َٕقم باشتخدام اخلاصٔة ‪ float‬أـثر مـ مرة ذم تهّٔؿ ما– وهذا افٌافب– ؾُّْْٔا اختٔار اشؿ‬
‫‪ٕ class‬ؤٍف ذم مجٔع افًْاس افتل ٕريد ايَاف آزاحة ظْٓا ثؿ َٕقم بتًٔغ وؿػ آزاحة بـ ‪clear‬‬
‫‪ :both‬ذم مِػ افتْسٔؼ وهُذا ٓ ٕوىر إػ تُرار ٍٕس إمر ـؾ مرة‪ -‬مع افًِؿ أن ـثر مـ‬
‫ادهّّغ يستخدمقن افقشؿ ‪ div‬فًٍؾ ذفؽ ـام يع‪9‬‬

‫‪017‬‬
‫‪ -0‬يتؿ وضع هذا افسىر <‪ >div class="clear"></div‬بًد أي ظْك مىبؼ ظِٔف‬
‫امافة وؿبؾ افًْك افذي ٕريد ايَاف آمافة ظْف‬

‫‪ -1‬اضاؾة افتْسٔؼ افتايل ذم مِػ افتْسٔؼ‪}; clear {clear : both- 9‬‬

‫‪ 03-5‬حتديد مقضع ظْك‬

‫هذه أهؿ خهائص فٌة ‪ CSS‬ذم ٕيري فُـ مع إشػ يًد » حتديد مقضع افًْاس« أصًب‬
‫مٍاهٔؿ هذه افٌِة ظذ آضالق‪ ،‬وٓ يْبع هذه افهًقبة مـ ادٍٓقم ٍٕسف بؾ مـ ظدم ؾٓؿ ماهٔة ظّؾ‬
‫ادٍٓقم وـٍٔٔة حتديد مقضع افًْاس وافؼوط افتل جيب مراظاهتا فذا شٖؿقم بؼح هذا ادٍٓقم‬
‫بنُؾ مٍهؾ فُـ بًد أن ٕتًرف ظذ افىرق افثالثة ادستخدمة فتحديد مقا ضع افًْاس وهل‪9‬‬

‫‪ 9absolute‬مقضع مىِؼ ‪ ,‬ي ُّْْا بقاشىة هذه افىريَة حتديد مقضع فيٓقر افًْك‬ ‫‪‬‬
‫شقاء يّغ‪ ،‬يسار‪ ،‬ؾقق أو حتت ويتؿ حتديد مقضع افًْك باظتامد مساحة افهٍحة ـامِة‬
‫وشَْقم بؼح مًْك هذا افُالم ذم ؾَرات تافٔة‪ -‬وجير آصارة أجوا أن افًْك يتحرك مع‬
‫افهٍحة صًقدا وٕزوٓ ظْدما يُقن حمتقى افهٍحة ـبرة‪-‬‬

‫‪ 9fixed‬مقضع ثابت‪ ,‬تتنابف هذه افىريَة مع شافٍٓا ذم ـقن حتديد مقضع افًْك‬ ‫‪‬‬
‫يُقن اظتامدا دساحة افهٍحة ـامِة‪ ،‬وختتِػ ظْٓا ذم ـقن افًْك تبَك ثابتة ذم مُاهنا‬
‫وٓ تتحرك مع افهٍحة مٓام ـإت حجام‪-‬‬

‫‪ 9relative‬مقضع ٕسبل‪ 9‬أما هذه افىريَة ؾتختِػ ظـ آثْغ مـ حٔث حتديد مقضع‬ ‫‪‬‬
‫افًْك إذ يتؿ ذفؽ باظتبار مُإف وبْاء ظذ مقضًف إصع وفٔس افهٍحة‪-‬‬

‫فتحديد افىريَة افتل ٕريد اشتخدامٓا فتحديد مقضع افًْك ؾْٕ٘ا ٕستخدم ‪ ،fixed ،absolute‬أو‬
‫‪ relative‬ـَّٔة فِخاصٔة ‪ position‬وحتتٓا مباذة يتؿ حتديد إحداثٔة ادقضع اجلديد فًِْك‬
‫باشتخدام أحد اجلٓات إربًة (‪ )top, right, bottom, left‬أو اثْان مْٓا فتحديد إحداثٔة‬
‫مزدوجة‪ -‬مٓال‪----‬مٓال ‪----‬تقؿػ ! هؾ يُّْؽ أن تؼح يل ذفؽ بافٌِة افًربٔة ؟‬

‫بافىبع أؾًؾ‪ ،‬ؾٓذا هق ادٍٓقم افذي ؿِْا أنْا شْتحدث ظْف بافتٍهٔؾ‪ ،‬ؾٓٔا بْا ٕبدأ‪-‬‬

‫‪018‬‬
‫فٍْسض أنْا ِّٕؽ رشؿ بٔاين يبدأ خىف افًامقدي (ص) مـ افرؿؿ ‪ 0‬إػ ‪ 5‬وخىف إؾَل (س) مـ‬
‫افرؿؿ ‪ 0‬إػ ‪ -6‬وأن فٍْسض أنف ضِب مْا حتديد مقضع افَْىة » ج(‪ « )3 .5‬بحٔث ينر افرؿؿ ‪5‬‬
‫إػ مقضع افَْىة ج مـ حٔث اخلط إؾَل وـذفؽ افرؿؿ ‪ 3‬مـ حٔث اخلط افًامقدي ؾامذا يُقن‬
‫احلؾ؟‬

‫بافًقدة إػ رياضٔات افهػ افسابع آبتدائل ٕدرك أنف جيب رشؿ خىغ مستَّٔغ أحدمها ظامقدي‬
‫يبدئ مـ افرؿؿ ‪ 5‬مـ اخلط إؾَل إشاد بْٔام أخر أؾَل يبدئ مـ افرؿؿ ‪ 3‬مـ اخلط افًامقدي‬
‫إشاد وشُٔقن مقضع افَْىة ج هل افَْىة افتل يتَاضع ؾٔٓا اخلىغ اجلديديـ ـام ذم افنُؾ‬
‫افتايل‪9‬‬

‫افنُؾ ‪06-03‬‬

‫ظْدما َٕقم بتىبٔؼ ٍٕس هذا ادثال مع صاصة احلاشقب ٕجد أن ـؾ زاوية مـ افزوايا إربًة فِناصة‬
‫تٍْع أن تُقن افَْىة آؾساضٔة (‪ )/./‬افتل تبدء ظْدها اإلحداثٔات فتحديد مقضع أي َٕىة ظذ‬
‫افناصة‪ ،‬وهلذا افسبب ؿِْا أنف يُّـ اشتخدام أحد اجلٓات إربًة أو جٓتغ مًا فتحديد افَْىة‪-‬‬
‫ودزيد مـ افتقضٔح شَْقم بدراشة افنُِغ افتافٔغ‪9‬‬

‫‪02/‬‬
 ‫افنُؾ ‪07-03‬‬

‫افنُؾ ‪08-03‬‬

‫‪020‬‬
‫ينبف افنُؾ إول (‪ )0/,03‬افرشؿ افبٔاين افًادي ذم افنُؾ (‪ )8,03‬بْٔام افنُؾ افثاين (‪,03‬‬
‫‪ )00‬ؾّٔثؾ إًُاس افنُؾ إول ويّثؾ افنُؾ آؾسايض فٌِة ‪ -css‬وفق اؾسضْا أن أحجام‬
‫افناصة مَدر بافبُٔسؾ حسب إرؿام ذم افنُِغ ‪ 5*7‬وتؿ تىبٔؼ افتْسٔؼ رؿؿ ‪ 0‬أدٕاه ؾافْتٔجة‬
‫شُٔقن افَْىة ادحددة ذم افنُؾ افثاين‪ ،‬أما ذم حال أردٕا أن ييٓر افًْك ذم افَْىة ادحددة ذم‬
‫افنُؾ إول ؾٔجب تًديؾ افتْسٔؼ فٔهبح ـام ذم افتْسٔؼ رؿؿ ‪-1‬‬

‫افتْسٔؼ رؿؿ‪90‬‬
‫{ ‪p‬‬
‫;‪position: absolute‬‬
‫;‪left: 6px‬‬
‫;‪top: 4px‬‬
‫}‬

‫افتْسٔؼ رؿؿ ‪91‬‬

‫{ ‪p‬‬
‫;‪position: absolute‬‬
‫;‪left: 6px‬‬
‫;‪bottom: 4px‬‬
‫}‬

‫ٕالحظ أن افٍرق بغ هذيـ افتْسَٔغ هق حتقل ‪( top‬إظذ) ذم افتْسٔؼ رؿؿ ‪ 0‬إػ ‪bottom‬‬
‫(إشٍؾ) ذم افتْسٔؼ رؿؿ ‪ ، 1‬أما إرؿام ؾيِت ـام هل دون تٌٔر‪ٍٕٓ -‬ؿ مـ هذا أن حتديد مقضع‬
‫افًْك يًتّد ظذ اجلإب افذي ٕحسب مْف وفٔس جمرد إرؿام‪-‬‬

‫بام أن حتديد مقضع افًْك يًتّد ظذ اجلإب افذي ٕحسب مْف وفٔس جمرد إرؿام‪ ،‬ؾٕ٘ف يُّْْا‬
‫ببساضة افتالظب بَّٔة ‪ top‬ذم افتْسٔؼ رؿؿ ‪ 0‬فِحهقل ظذ ٕتٔجة افنُؾ إول وـذفؽ يُّْْا‬
‫افتالظب بَّٔة ‪ bottom‬ذم افتْسٔؼ رؿؿ ‪ 1‬فِحهقل ظذ ٕتٔجة افنُؾ افثاين‪ -‬ؾِق أمًْا افْير‬
‫فقجدٕا أن افرؿؿ ‪ 3‬ذم افنُؾ إول تَابِٓا افرؿؿ ‪ 0‬مـ افنُؾ افثاين ؾإٓتَال بغ ـؾ واحد مْٓام‬
‫َٕىة واحدة (مـ افبداية ‪ /‬إػ ‪ 0‬ذم افنُؾ افثاين – ومـ افْٓاية ‪ 4‬إػ ‪ 3‬ذم افنُؾ إول ) وبافتايل فق‬
‫اشتبدفْا ؿّٔة ‪ top‬بـ ‪ 0‬حلهِْا ظذ ٍٕس ٕتٔجة افنُؾ إول‪ -‬إذا ؾّٓت افًِبة ؾابحث وحدك ظـ‬
‫افَّٔة افتل جيب اظىائٓا فـ ‪ bottom‬ذم افتْسٔؼ رؿؿ ‪ 1‬ـل ٕحهؾ ظذ ٍٕس ٕتٔجة افنُؾ افثاين‪-‬‬

‫‪021‬‬
‫وجيب إٓتباه إػ أنف مـ ادُّـ حتديد مقضع ظْك باشتخدام جإب واحد ؾَط‪ ،‬حْٔٓا يًتّد‬
‫ادتهٍح أن ؿّٔة اجلإب افٌر ادذـقر تساوي صٍر‪ ،‬ؾِق أنْا مثال حددٕا طٓقر ظْك ظذ بًد ‪2//‬‬
‫بُسؾ مـ افٔسار دون حتديد آخر ؾٓذا يًْل ذم احلََٔة‪ 9‬طٓقر افًْك أظذ افٔسار ظذ بًد ادساؾة‬
‫ادذـقرة‪ -‬أما إذا حددٕا طٓقر افًْك ظذ بًد ‪ 2//‬بُسؾ مـ إظذ دون حتديد آخر ؾسًْٔل هذا‪9‬‬
‫طٓقر افًْك ذم افٔسار ظذ بًد ادساؾة ادذـقرة مـ إظذ‪ -‬وهذا إخر يُقن حسب ادماه‬
‫افهٍحة ؾِق أن افهٍحة تبدأ مـ افٔسار إػ افّٔغ ؾسٔيٓر افًْك ذم افٔسار ظذ بًد ‪ 2//‬بُسؾ مـ‬
‫إظذ أما إذا ـان ادماه افهٍحة مـ افّٔغ إػ افٔسار ؾسٔيٓر ذم افّٔغ ظذ بًد ‪ 2//‬بُسؾ مـ‬
‫إظذ‪ -‬وهُذا مع باؿل اجلقإب إخرى‪-‬‬

‫أخرا بًد أن إتٓ ْٔا مـ ذح مٍٓقم حتديد مقضع افًْاس جيب أن أسح فؽ أن ما ذحْاه ـِف‬
‫يٍسض أن افهٍحة تبدأ مـ افٔسار إػ افّٔغ (احلافة آؾساضٔة) فُـ ذم إشاس صٍحات ادقاؿع‬
‫افًربٔة تبدأ مـ افّٔغ إػ افٔسار فذا شٖضِب مْؽ أن تُقن حذرا حٔث شَْقم أن برسد بًض‬
‫إمثِة ظـ ـؾ ضريَة‪ ،‬فُـ هذه ادرة باظتبار أن افهٍحة تبدأ مـ افّٔغ إػ افٔسار مع افًِؿ أنف ٓ‬
‫يقجد ؾرق جقهري بْٔٓام فُـ جمرد إًُاس صُع ؾبًد أن ـْا ًٕتّد أـثر ظذ جإب افٔسار (‪)left‬‬
‫فتحديد مقضع افًْاس شْتحقل أن فالظتامد أـثر ظذ جإب افّٔغ (‪ )right‬إضاؾة فألظذ‬
‫(‪ )top‬ضبًا‪-‬‬

‫‪ 03-5-0‬مقضع مىِؼ‬

‫أوٓ ؿؿ بٕ٘ناء مِػ صٍحة ويب وضع داخِٓا ؾَرتغ ٕص ثؿ أضػ ظذ افٍَرة افثاين خاصٔة‬
‫‪ class‬بَّٔة ‪ sunduk‬ثؿ احرص ظذ أن تُقن حمتقى هذه افٍَرة أؿؾ مـ حمتقى افٍَرة إوػ ـل‬
‫يساظدك هذا ظذ مالحية افْتٔجة جٔدا‪-‬‬

‫>‪</p‬ؿؿ ب٘ضاؾة ٕص ضقيؾ ذم هذه افٍَرة فِتجربة>‪<p‬‬

‫>‪</p‬مثال حتديد مقضع افًْاس>"‪<p class="sunduk‬‬

‫وأن َٕقم ب٘ضاؾة افتْسَٔات افتافٔة ظذ افٍَرتغ مًا‪ 9‬ظرض ‪ 14/‬بُسؾ‪ ،‬حدود بسامـة ‪1‬بُسؾ‬
‫ومـ افْقع ادتامشؽ‪ ،‬ضبط افْص وحنق داخع بَّٔة ‪ 03‬بُسؾ‪-‬‬
‫{ ‪p‬‬

‫‪022‬‬
 ‫;‪width: 250px‬‬
‫;‪Border: 2px solid‬‬
‫;‪text-align: justify‬‬
‫;‪padding: 14px‬‬
‫}‬

‫ظْدما َٕقم بتجربة ادثال مع هذه افتْسَٔات ؾسٔيٓر افٍَرتغ حتت بًوٓام افبًض فُـ ظْدما َٕقم‬
‫بتحديد مقضع افٍَرة افثإٔة بٖن تيٓر ظذ بًد ‪ 2//‬بُٔسؾ مـ افّٔغ و ‪ 04/‬بُٔسؾ مـ إظذ‬
‫(افتْسَٔات افتافٔة) ؾستتحقل ٕتٔجة ادثال فتهبح ـام ذم افنُؾ ‪-01,03‬‬
‫{ ‪.sunduk‬‬
‫;‪position: absolute‬‬
‫;‪right: 300px‬‬
‫;‪top: 150px‬‬
‫}‬

‫افْتٔجة‪9‬‬

‫افنُؾ ‪1/-03‬‬

‫‪023‬‬
 ‫‪ 03-5-1‬مقضع ثابت‬

‫تًّؾ ضريَة ادقضع افثابت ـىريَة ادقضع ادىِؼ متاما‪ ،‬وافٍرق افقحٔد بْٔٓام هق أنف ظْدما يُقن‬
‫حمتقى افهٍحة ـبرة ثؿ َٕقم بتّرير افؼيط اجلإبل ؾسٔتحرك افهْدوق مع حمتقى افهٍحة ذم حال‬
‫ادقضع ادىِؼ بْٔام ذم حال ادقضع افثابت يبَك حمتقى افهْدوق ثابتة ذم مُإف‪-‬‬

‫فتجربة ذفؽ ؿؿ بزيادة ٕص افٍَرة إوػ مـ ادثال افسابؼ بحٔث ييٓر ذيط افتّرير ظْد ؾتح ادِػ‬
‫ظذ ادتهٍح ثؿ ؿؿ بتجربة ادثال وشتالحظ ظْد مترير افؼيط اجلإبل أن صْدوق افٍَرة افثإٔة‬
‫تتحرك مع افهٍحة‪ -‬واحلغ دالحية افٍرق بغ ضريَة ادقضع افثابت وادقضع ادىِؼ‪ ،‬اشتبدل ؿّٔة‬
‫‪ position‬ذم مِػ افتْسٔؼ مـ ‪ absolute‬إػ ‪ fixed‬ثؿ ؿؿ بتجربة ادثال مرة أخرى وشتالحظ‬
‫هذه ادرة أن صْدوق افٍَرة افثإٔة شتيؾ ثابتة ذم مُاهنا ظْدما تتحرك افهٍحة ٕزوٓ وصًقدا‪-‬‬

‫‪ 03-5-2‬مقضع ٕسبل‬

‫ؿِْا أن هذه افىريَة تنبف افىريَتغ افسابَتغ ذم ظِّٓام فُـ افٍرق هق أن افىريَتغ افسابَتغ يتؿ‬
‫حتديد مساؾة ادقضع بْاء ظذ حجؿ افهٍحة أما ذم هذه افىريَة ؾٔتؿ حتديد ذفؽ بْاء ظذ ادقضع‬
‫إصع افذي يتقاجد ؾٔف افًْك وافنُؾ افتايل أؾهح مْل ذم افبٔان‪9‬‬

‫ٕالحظ ذم هذا افنُؾ أن تىبٔؼ إحداثٔات مقضع افًْك يبدأ مـ ادقضع إصع فًِْك وفٔس مـ‬
‫زاوية افهٍحة أو افناصة وفق ضبَْا افتْسَٔات افتافٔة ظذ ادثال ذم هذا افنُؾ‪9‬‬
‫{ ‪strong‬‬
‫;‪position: relative‬‬
‫;‪left: 50px‬‬
‫;‪top: 15px‬‬
‫}‬

‫ؾافْتٔجة شُٔقن ـام يع‪9‬‬

‫‪024‬‬
 ‫فتجربة هذا ادثال ظذ حاشقبؽ ؿؿ بتىبٔؼ خهائص ‪ css‬افسابَة ظذ مهدر ‪ xhtml‬افتايل‪9‬‬

‫>‪<strong‬تؿ تٖشٔس >‪<p‬‬ ‫>‪.</p‬ظام ‪</strong> 1951‬جامًة افدول افًربٔة‬

‫مالحية‪ 9‬هؾ تتساءل حاذا ضبَْا هذه افتْسَٔات ظذ افقشؿ افداخع ‪ strong‬؟ اضّئـ مل يُـ ذفؽ‬
‫خىٖ‪ ،‬ؾاحلََٔة أن خهائص حتديد مقضع افًْاس ٓ تًّؾ مع افقشقم اخلارجٔة ؾَط بؾ تًّؾ مع‬
‫افقشقم افداخِٔة أجوا‪ ،‬وبادْاشبة ؾَط خاصٔتا حتديد افىقل وافًرض مها افِتان ٓ تًّالن مع‬
‫افق شقم افداخِٔة أما أـثر اخلهائص ؾتًّؾ مع ـال افْقظغ فُـ تًّدت ظدم ذـر ذفؽ فُقن‬
‫إصؾ أن ٕستخدم هذه اخلهائص مع افقشقم اخلارجٔة ٕؽراض حتديد صُؾ افهٍحة‪-‬‬

‫‪025‬‬
 ‫اجلداول‬ ‫‪04‬‬

‫‪ 04-0‬متٓٔد‬

‫ٓ حت تاج اجلداول إػ تًريػ ؾبافىبع إن مل تستخدمٓا ذم حمرر ٕهقص مايُروشقؾت وورد‬

‫(‪ )Microsoft Word‬ؾال صؽ أنؽ رأجتٓا ذم أحد ادقاؿع أو حتك ذم بًض ادىبقظات ادختٍِة؛‬
‫إذ تستخدم اجلداول إليراد جمّقظة أصٔاء بنُؾ مرتب‪ -‬فُـ ذم افبداية أرى مـ واجبل أن أحذرك‬
‫مـ اشتخدام اجلداول فِتحُؿ بنُؾ مقؿًؽ ؾٓذا أـثر ما يِجٖ إفٔف مًيؿ ادهّّغ ادبتدئغ‪ -‬وهذا‬
‫خىٖ ؾادح بافىبع إذ أن ؾًؾ ذفؽ جيًؾ تًِؿ فٌة ‪ CSS‬دون ؾائدة‪ ،‬إذ هل افٌِة ادسٗوفة ظـ تَسٔؿ‬
‫ادقؿع وترتٔب صُِف افًام ـام شْرى ذفؽ ؾٔام بًد‪-‬‬

‫وأن فًْد أدراجْا إػ أصؾ ادقضقع‪ ،‬ودظْل أؿقل فؽ أن هْاك ٕقظان مـ اجلداول أو بإحرى‬
‫ٕقع واحد يتؿ آشتٌْاء ظـ بًض اخلهائص ؾُٔقن جدول ظادي أو ٕستخدم مجٔع اخلهائص‬
‫ؾُٔقن فديْا جدول مىقر حيتقي ظذ ـثر مـ ادٔزات‪-‬‬

‫ذم ـال افْقظغ َٕقم بتًريػ اجلدول باشتخدام افقشؿ <‪ >table‬افذي حئط بُامؾ ظْاس اجلدول‬
‫ويتؿ إؽالؿف بًد آخر ظْك ؾٔٓا باشتخدام وشؿ اإلؽالق <‪ >/table‬ـام يع‪9‬‬
‫>‪<table‬‬

‫>‪---‬هْا يتؿ إضاؾة ظْاس اجلدول‪<!---‬‬

‫>‪</table‬‬

‫أما إلضاؾة ظْاس ذم اجلدول ؾْستخدم <‪ >tr> </tr‬إلضاؾة شجؾ ثؿ بداخِٓا ٕستخدم < >‪td‬‬
‫‪ ></td‬إلضاؾة ظْاس اجلدول بًدد اخلإات ذم ـؾ شجؾ ـام يبْٔف افنُؾ افتايل‪9‬‬

‫‪026‬‬
 ‫افنُؾ ‪0-04‬‬

‫إذا ٓ حيْا ذم هذا افنُؾ ؾ٘ن ـؾ مـ "ثقرة احلرية وافُرامة"‪" ،‬تقٕس"‪ 06" ،‬ديسّز ‪ "1/0/‬و‬
‫"زيـ افًابديـ بـ ظع"‪ 9‬ـؾ هذا يّثؾ شجؾ واحد حماط بافقشؿ <‪ >tr> </tr‬أما "ثقرة احلرية‬
‫وافُرامة" ؾتّثؾ وحده خإة داخؾ افسجؾ (أي وشؿ <‪ >td></td‬بداخؾ وشؿ افسجؾ‬
‫(>‪ )<tr></tr‬وـذفؽ بافْسبة فًِِّقمات إخرى ـؾ واحدة مْٓا متثؾ خإة بحد ذاهتا‪ -‬وأن إذا‬
‫احتسبْا ـامؾ اجلدول هبذا إشِقب ؾسْجد أنْا ّٕتِؽ ثالث شجالت <‪ >tr‬بداخؾ ـؾ شجؾ‬
‫مْٓا ثالث خإات <‪ >td‬وؾٔام يع أوامر اجلدول ذم افنُؾ افسابؼ ‪90,04‬‬
‫>‪<table‬‬
‫>‪<tr‬‬

‫>‪</td‬ثقرة احلرية وافُرامة>‪<td‬‬

‫>‪</td‬تقٕس>‪<td‬‬

‫‪<td>17‬‬ ‫>‪</td‬ديسّز ‪2111‬‬

‫>‪</td‬زيـ افًابديـ بـ ظع>‪<td‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</td‬ثقرة ‪ 25‬يْاير>‪<td‬‬

‫>‪</td‬مك>‪<td‬‬

‫‪<td>25‬‬ ‫>‪</td‬يْاير ‪2111‬‬

‫‪027‬‬
 ‫>‪</td‬حمّد حسْل مبارك>‪<td‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</td‬ثقرة ‪ 17‬ؾزاير>‪<td‬‬

‫>‪</td‬فٔبٔا>‪<td‬‬

‫‪<td>17‬‬ ‫>‪</td‬ؾزاير ‪2111‬‬

‫>‪</td‬مًّر افَذاذم>‪<td‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</td‬ثقرة افنباب افّْٔٔة>‪<td‬‬

‫>‪</td‬افّٔـ>‪<td‬‬

‫‪<td>11‬‬ ‫>‪</td‬ؾزاير ‪2111‬‬

‫>‪</td‬ظع ظبد اهلل صافح>‪<td‬‬

‫>‪</tr‬‬
‫>‪</table‬‬

‫ظْد دمربة هذا ادثال ظذ ادتهٍح شتناهد أن هذا ادثال ينبف اجلدول ذم افنُؾ ‪ 0,04‬مـ حٔث‬
‫افستٔب فُـ دون احلدود‪ -‬هْاك ضريَتان إلطٓار حدود اجلدول‪ -‬إما ظـ ضريؼ إضاؾة اخلاصٔة‬
‫"‪ border="1‬ظذ افقشؿ ‪ table‬مباذة وظْدها شُٔقن افْتٔجة مناهبا متاما فنُؾ اجلدول ذم‬
‫افنُؾ ‪ -0,04‬أما افىريَة افثإٔة ؾتُقن باشتخدام ‪ CSS‬وحتديدا اخلاصٔة ‪ border‬ـام تًِّْاه‬
‫شابَا‪-‬‬
‫{ ‪td‬‬
‫;‪border: 1px solid‬‬
‫}‬

‫‪028‬‬
 ‫افنُؾ ‪1-04‬‬

‫ظْد إطٓار حدود اجلدول ظـ ضريؼ ‪ css‬ؾ٘ن افْتٔجة ختتِػ ظام فق تؿ إطٓارها ظـ ضريؼ إضاؾة‬
‫اخلاصٔة "‪ border= "1‬داخؾ افقشؿ ‪ table‬مباذة‪ -‬ؾُام يتوح فؽ ذم افنُؾ ‪ 1,04‬ؾ٘ن حدود‬
‫اجلدول مٍْهِة ظـ بًوٓا افبًض وـٖن ـؾ خإة داخؾ اجلدول هلا حدود خاص بف‪ -‬فٔس هذا‬
‫بادنُِة افهًب ؾًْدما ٕقد أن تيٓر حدود اجلدول بافنُؾ ادًتاد‪ ،‬ؾ٘ن ب٘مُإْا اشتخدام اخلاصٔة‬
‫ادسّك ‪ border-collapse‬فِتحُؿ بذفؽ حٔث يُّـ هلا أن تٖخذ احدى افَّٔتغ افتافٔتغ‪9‬‬

‫‪ 9collapse‬أي متامشؽ‬ ‫‪‬‬

‫‪ 9 separate‬مٍْهال ظـ بًوٓا افبًض (افَّٔة آؾساضٔة)‬ ‫‪‬‬

‫يُّْؽ دمربة هذا باشتخدام أوامر ادثال إخر‪ ،‬فُـ يرجك إٓتباه أن خاصٔة احلدود )‪(border‬‬
‫يتؿ اضاؾتٓا ظذ افقشؿ )‪ (td‬بْٔام وشؿ متاشؽ احلدود )‪ (border-collapse‬يتؿ اضاؾتٓا ظذ‬
‫وشؿ اجلدول )‪-(table‬‬

‫‪ 04-1‬ظْقان اجلدول‬

‫حتك أن ـْت تَرأ ادًِقمات ذم اجلدول افسابؼ دون أن تدري متاما ما متثِف تِؽ ادًِقمات (شقى‬
‫إؾُار افتل بْٔتٓا أنت ذم خمِٔتؽ)‪ -‬دظْل أؿقل فؽ أن ادًِقمات افسابَة تتحدث ظـ» ثقرات‬

‫‪03/‬‬
‫افربٔع افًريب « فُـ ؾَط ذم افبِدان افتل أدت ؾٔٓا افثقرة إػ اشَاط افْيام‪ ،‬إذا ادَهقد مـ ظْقان‬
‫اجلدول هق امُإٔة اضاؾة » افثقرات افتل أدت إػ اشَاط افْيام « ـًْقان فِجدول افسابؼ‪ -‬فًٍؾ‬
‫ذفؽ َٕقم ب٘ضاؾة افًْقان ـّحتقى فِقشؿ ‪ caption‬وذفؽ حتت افقشؿ ‪ table‬مباذة‪9‬‬

‫>‪</caption‬افثقرات افتل أدت إػ اشَاط افْيام >‪<caption‬‬

‫‪ 04-2‬اجلداول افًادية‬

‫اجلدول افًادي هق ٍٕسف مثال اجلدول ذم ادَدمة افسابَة فُـ فق ٓحيت ؾ٘ن ؿراءة ادًِقمات يبَك‬
‫مبّٓة ٕقظا ما‪ ،‬فذا مـ إؾوؾ حتديد ٕقع ـؾ مًِقمة ذم اجلدول ـخىقة فتسٓٔؾ ؿراءة مًِقمات‬
‫اجلدول ‪ -‬ؾٍل اجلدول افسابؼ مثال حيتقي اخلإة إوػ وافثإٔة وافثافثة وافرابًة بافستٔب ظذ اشؿ‬
‫افثقرة‪ ،‬افبِد افذي جرت ؾٔف‪ ،‬تاريخ بدايتٓا و أخرا افرئٔس ادخِقع‪ -‬ظْدما أؿقم ببٔان هذا فِزائر‬
‫أـقن ؿد أننٖت جدول تام وّٕقذجل‪-‬‬

‫ٕستخدم افقشؿ ‪ th‬فبٔان ٕقع ـؾ مًِقمة‪ ،‬بحٔث يتؿ إضاؾتف داخؾ شجؾ (أي وشؿ ‪ )tr‬بًدد أظّدة‬
‫اجلدول و جيب أن يسبؼ ـؾ حمتقيات خإات اجلدل ـام يبْٔف ادثال افتايل‪9‬‬
‫>‪<table‬‬

‫>‪</caption‬افثقرات افتل أدت إػ اشَاط افْيام >‪<caption‬‬

‫>‪<tr‬‬

‫>‪</th‬اشؿ افثقرة>‪<th‬‬

‫>‪</td‬افبِد>‪<th‬‬

‫>‪</th‬تاريخ افبداية>‪<th‬‬

‫>‪</th‬افرئٔس ادخِقع>‪<th‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</td‬ثقرة احلرية وافُرامة>‪<td‬‬

‫‪030‬‬
 ‫>‪</td‬تقٕس>‪<td‬‬

‫‪<td>17‬‬ ‫>‪</td‬ديسّز ‪2111‬‬

‫>‪</td‬زيـ افًابديـ بـ ظع>‪<td‬‬

‫>‪</tr‬‬

‫>‪--‬تُِّة باؿل أوامر ادثال افسابؼ—! <‬

‫>‪<table‬‬

‫ؿبؾ دمربة ادثال جيب تًديؾ مِػ افتْسٔؼ بحٔث ٕوع اجلدود فُؾ مـ افقشؿ ‪ td‬افذي حتقي‬
‫مًِقمة ـؾ خإة وـذفؽ افقشؿ اجلديد ‪ td‬افذي حتقي ٕقع ـؾ خإة‪-‬‬
‫{ ‪td, th‬‬
‫;‪border: 1px solid‬‬
‫}‬
‫{ ‪table‬‬
‫;‪border-collapse: collapse‬‬
‫}‬

‫افنُؾ ‪2-04‬‬

‫‪031‬‬
‫ٕالحظ ذم هذا ادثال أنف يتؿ إٕناء شجؾ ـامؾ ظـ ـؾ ثقرة بحٔث يقضع ـامؾ مًِقمات افثقرة‬
‫افقاحدة ذم وشؿ ‪ tr‬بْٔام يُقن ـؾ مًِقمة داخؾ وشؿ ‪ -td‬وجيب احسام ترتٔب أنقاع ادًِقمات ذم‬
‫اضاؾة ـؾ مًِقمة‪ ،‬ؾ٘ذا ـان "اشؿ افثقرة" هق إول ذم رأس اجلدول (‪ )th‬ؾٔجب وضع اشؿ افثروة‬
‫ذم أول خإة ‪ td‬وإٓ اختِػ أماــ ادًِقمات ‪-‬‬

‫وأن ماذا فق أردٕا ترتٔب ٍٕس اجلدول هبذا افنُؾ‪9‬‬

‫افنُؾ ‪3-04‬‬

‫بافىبع يُّْْا ؾًؾ هذا وباشتخدام ٍٕس افقشقم ادستخدمة ذم ادثال افسابؼ فُـ مع اختالف ذم‬
‫افستٔب‪ ،‬ؾِق اضًِت إػ ادثال افسابؼ شتجد أنف ـان يتؿ اطٓار مًِقمات ـؾ ثقرة ذم شجؾ واحد‬
‫(اشؿ افثقرة‪ ،‬افبِد‪ )---‬بْٔام مجٔع مًِقمات افْقع افقاحد ‪ ,‬ـجّٔع افبِدان مثال – ـإت تيٓر ذم‬
‫ظامقد واحد‪ ،‬ؾجّٔع اشامء افثقرات تيٓر ذم افًامقد إول ومجٔع افبِدان تيٓر ذم افًامقد افثاين إػ‬
‫آخره‪ -‬أما ذم افنُؾ ‪ 2,04‬ؾتيٓر مجٔع مًِقمات افْقع افقاحد ذم شجؾ واحد بْٔام تيٓر مًِقمات‬
‫ـؾ ثقرة ذم ظامقد واحد‪ ،‬أي أهنا ظُس إول تاما‪ -‬يُّْْا آشتٍادة مـ هذا إًُٓاس إلطٓار‬
‫اجلدول بافنُؾ ادراد‪ ،‬وذفؽ ظـ ضريؼ إضاؾة وشؿ ‪ tr‬بًدد شجالت اجلدول (هْا ‪ 3‬شجالت) ثؿ‬
‫ذم افسجؾ إول ٕوع افقشؿ ‪ th‬حيّؾ افَّٔة افتل تؼح ٕقع مًِقمات افسجؾ وفتُـ "اشؿ‬
‫افثقرة"‪ٕ ،‬ؤػ بًدها خإات افسجؾ باشتخدام افقشؿ ‪ْٕ -td‬تَؾ ظْد إٓتٓاء إػ افسجؾ افثاين )‪(tr‬‬
‫ثؿ َٕقم ب٘ضاؾة افقشؿ ‪ th‬افذي حتّؾ افَّٔة افتل تؼح ٕقع مًِقمات افسجؾ‪ ،‬فُـ ؿبؾ إضاؾة‬
‫خإات افسجؾ جيب أن ْٕتبف إػ افستٔب افذي اتبًْاه ذم إضاؾة خإات افسجؾ إول بحٔث فق ـان‬

‫‪032‬‬
‫اخلإة إوػ ذم افسجؾ إول هق "ثقرة احلرية وافُرامة" إذا اخلإة إول ذم افسجؾ افثاين جيب أن‬
‫"‬ ‫يُقن "تقٕس" وـذفؽ احلإة إوػ فِسجؾ افثافث جيب أن يُقن " ‪ 06‬ديسّز ‪1/0/‬‬
‫وـذفؽ اخلإة إخرة فِسجؾ إخر جيب أن يُقن " زيـ افًابديـ بـ ظع" وهُذا بافْسبة فباؿل‬
‫افسجالت‪ -‬وإفٔؽ إوامر ادستخدمة ذم افنُؾ افسابؼ‪9‬‬

‫>‪</caption‬افثقرات افتل أدت إػ اشَاط افْيام >‪<caption‬‬

‫>‪<tr‬‬

‫>‪</th‬اشؿ افثقرة>‪<th‬‬

‫>‪</td‬ثقرة احلرية وافُرامة>‪<td‬‬

‫>‪</td‬ثقرة ‪ 25‬يْاير>‪<td‬‬

‫>‪</td‬ثقرة ‪ 17‬ؾزاير>‪<td‬‬

‫>‪</td‬ثقرة افنباب افّْٔٔة>‪<td‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</th‬افبِد>‪<th‬‬

‫>‪</td‬تقٕس>‪<td‬‬

‫>‪</td‬مك>‪<td‬‬

‫>‪</td‬فٔبٔا>‪<td‬‬

‫>‪</td‬افّٔـ>‪<td‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</th‬تاريخ افبداية>‪<th‬‬

‫‪<td>17‬‬ ‫>‪</td‬ديسّز ‪2111‬‬

‫‪<td>25‬‬ ‫>‪</td‬يْاير ‪2111‬‬

‫‪033‬‬
 ‫‪<td>17‬‬ ‫>‪</td‬ؾزاير ‪2111‬‬

‫‪<td>11‬‬ ‫>‪</td‬ؾزاير ‪2111‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</th‬افرئٔس ادخِقع>‪<th‬‬

‫>‪</td‬زيـ افًابديـ بـ ظع>‪<td‬‬

‫>‪</td‬حمّد حسْل مبارك>‪<td‬‬

‫>‪</td‬مًّر افَذاذم>‪<td‬‬

‫>‪</td‬ظع ظبد اهلل صافح>‪<td‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪</tr‬‬
‫>‪</table‬‬

‫‪ 04-3‬اجلداول ادتىقرة‬

‫ٓ خت تِػ اجلداول ادىقرة ظـ افًادية مـ حٔث ادوّقن فُـ ؿد خيتٍِان ٕقظا ما ذم أشِقب رسد‬
‫ادًِقمات وترـٔب افقشقم وبنُؾ ظام شْتحدث ظـ اجلداول ادَسّة فٍئات ثؿ ٕتحدث ظـ دمج‬
‫بًض اخلاليا فتهبح خِٔة واحدة‪-‬‬

‫‪ 04-4‬تَسٔؿ اجلدول إػ ؾئات‬

‫يُّـ تَسٔؿ أي جدول فثالث ؾئات تتّثؾ ذم افرأس واجلسؿ وافذيؾ‪ ،‬يتؿ افتَسٔؿ وؾؼ أيت‪9‬‬

‫<‪ 9 >thead‬رأس اجلدول‬

‫<‪ 9 >tbody‬جسؿ اجلدول‬

‫‪034‬‬
 ‫<‪ 9 >tfoot‬ذيؾ اجلدول‬

‫وافنُؾ افتايل يبغ ـؾ ؿسؿ مـ هذه إؿسام‪9‬‬

‫افنُؾ ‪4-04‬‬

‫ٕستخدم ‪ th‬إلضاؾة ؿٔؿ خإات ـؾ مـ رأس اجلدول وذيِف بْٔام ٕستخدم ‪ td‬إلضاؾة ؿٔؿ حمتقى‬
‫اجلدول (اجلسؿ) وخالؾا حا ٕراه ذم افنُؾ افسابؼ أنف تؿ طٓقر رأس افهٍحة ثؿ اجلسؿ ثؿ افذيؾ‬
‫بٍْس افستٔب‪ ،‬ؾٕ٘ف ظْد إضاؾة ذفؽ ذم مِػ ‪َٕ ٓ xhtml‬قم باتباع ٍٕس افستٔب بؾ ٕبدأ برأس‬
‫اجلدول ئِف افذيؾ ومـ ثؿ جسؿ اجلدول ـام يع‪9‬‬
‫>‪<table‬‬

‫>‪</caption‬افثقرات افتل أدت إػ اشَاط افْيام >‪<caption‬‬

‫>‪<thead‬‬

‫>‪--‬حمتقى رأس اجلدول‪<!--‬‬

‫>‪</thead‬‬
‫>‪<tfoot‬‬

‫>‪--‬حمتقى ذيؾ اجلدول‪<!--‬‬

‫>‪</tfoot‬‬
‫>‪<tbody‬‬

‫‪035‬‬
 ‫>‪--‬حمتقى اجلدول‪<!--‬‬

‫>‪</tbody‬‬
‫>‪</table‬‬

‫‪ 04-5‬دمج اخلاليا‬

‫فٍْسض أنؽ ظذ وصؽ اضاؾة صٍحة » دفٔؾ متىِبات ختهيص إداريت ادًِقماتٔة وادحاشبٔة « ذم‬
‫مقؿع احدى اجلامًات‪ -‬وتريد أن تؤػ ؾٔٓا جدول حيتقي ظذ مجٔع ادقاد افتل يتؿ تدريسٓا ذم ـال‬
‫افتخههغ‪ ،‬مع بٔان افتخهص افذي يُقن ؾٔف احادة مىِقب‪ -‬أي أنف شٔيٓر مجٔع أشامء ادقاد ذم‬
‫افًامقد إول ثؿ ذم افًامقد افثاين توع جإب ـؾ مادة ـِّة "مىِقب" إذا ـان ختهص اإلدارية‬
‫يدرشٓا أو "ؽر م ىِقب" إذا ـان افًُس‪ -‬وـذفؽ تَقم بٍْس إمر مع ختهص ادحاشبٔة ذم‬
‫افًامقد افثافث‪ -‬وأن فٍْسض أنؽ بًد إضاؾة ادًِقمات هبذا افنُؾ وصِت حادة آؿتهاد‬
‫اجلزئل افتل تبغ فؽ أهنا متىِب فُال ختهيص اإلدارية وادحاشبٔة ؾامذا تًٍؾ؟ هؾ شتذـر أهنا‬
‫مىِقبة فتخهص اإلدارية ثؿ تًقد وتذـر مرة أخرى أهنا مىِقبة فتخهص ادحاشبٔة أم أنؽ تٍوؾ‬
‫أن تذـر أهنا "منسـة" ؟‬

‫هذا ما ٕستٍٔد مْف وراء دمج اخلاليا وفُـ ؿبؾ أن ٕتًِؿ ـٍٔٔة ؾًؾ ذفؽ دظْل أريؽ صقرة ظام‬
‫حدثتؽ ظْف فِتق‪-‬‬

‫‪036‬‬
 ‫افنُؾ ‪5-04‬‬

‫وأن بًد أن ؾّٓت ما شًٍِْف جيب أن تًِؿ أن هْاك حافتان فدمج اخلاليا وهل إما أن ٕدمج خِٔتان‬
‫متَابالن ذم ٍٕس افسجؾ ـام ذم افنُؾ افسابؼ أو ٕدمج خِٔتان متَابالن ذم ٍٕس افًامقد‪ ،‬ـٖن ٕدمج‬
‫اخلِٔتغ "ؽر مىِقب" مع "منسك" ذم حال ظدم تقاجد أي دمج ذم اجلدول ذم افنُؾ افسابؼ‪-‬‬

‫ذم ـال حافتل افدمج يتؿ إضاؾة خاصٔة جديدة ظذ وشؿ اخلِٔة ادراد دجمٓا (‪ )td‬و ختتِػ هذه‬
‫اخلاصٔة باختالف افدمج ادراد إضاؾتف ـام يع‪9‬‬

‫إذا ـان افدمج بغ خِٔتغ متَابِغ ذم ٍٕس افسجؾ ؾاخلاصٔة ادستخدمة هل‪colspan 9‬‬

‫أما إذا ـان افدمج بغ خِٔتغ متَابِغ ذم ٍٕس افًامقد ؾاخلاصٔة ادستخدمة تهبح‪rowspan 9‬‬

‫تٖخذ هاتان اخلاصٔتان ؿّٔة رؿّٔة متثؾ ظدد اخلاليا اددجمة ؾِق ـإت ؿّٔة اخلاصٔة ‪ colspan‬هل ‪1‬‬
‫ـام يع‪ >”td colspan=”2< 9‬ؾ٘ن هذا يًْل دمج خِٔتغ متَابِغ ذم ٍٕس افسجؾ (اخلِٔة اجلديدة‬
‫شتَابؾ خِٔتغ ظامقديا)‪ -‬أما فق أن اخلاصٔة ادستخدمة هل ‪ rowspan‬ظْدها تدمج خِٔتغ‬
‫متَابِغ ذم ٍٕس افًامقد (اخلِٔة اجلديدة تَابؾ خِٔتغ أؾَٔا)‪ ،‬وادثال افتايل يقضح احلافة إوػ‪9‬‬
‫>‪<table‬‬
‫>‪<tr‬‬

‫>‪</th‬اخلِٔة إول مـ افسجؾ إول>‪<th‬‬

‫‪037‬‬
 ‫>‪</th‬اخلِٔة افثاين مـ افسجؾ افثاين>‪<th‬‬

‫>‪</th‬اخلِٔة افثافث مـ افسجؾ إول>‪<th‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</td‬اخلِٔة إول مـ افسجؾ افثاين>‪<td‬‬

‫>‪</td‬اخلِٔة افثاين مـ افسجؾ افثاين>‪<td‬‬

‫>‪</td‬اخلِٔة افثافث مـ افسجؾ افثاين>‪<td‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</td‬اخلِٔة إول مـ افسجؾ افثافث>‪<td‬‬

‫>"‪<td colspan="2‬‬ ‫>‪</td‬اخلِٔة افثاين مـ افسجؾ افثافث (اددمج)‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪</td‬اخلِٔة إول مـ افسجؾ افرابع>‪<td‬‬

‫>‪</td‬اخلِٔة افثاين مـ افسجؾ افرابع>‪<td‬‬

‫>‪</td‬اخلِٔة افثافث مـ افسجؾ افرابع>‪<td‬‬

‫>‪</tr‬‬
‫>‪</table‬‬

‫‪038‬‬
 ‫افنُؾ ‪6-04‬‬

‫إذا ؿّْا بتحِٔؾ هذا اجلدول ؾسْجد أن (اخلِٔة إوػ مـ افسجؾ إول) تَابؾ (اخلِٔة إوػ مـ‬
‫افسجؾ افثاين) وهاتان آثْتان يَابالن ذم ٍٕس افقؿت (اخلِٔة إوػ مـ افسجؾ افثافث) وافُؾ‬
‫ـذفؽ يَابؾ (اخلِٔة إوػ مـ افسجؾ افرابع) وهُذا ـؾ اخلاليا إوػ مـ ـؾ شجؾ يَابِـ بًوٓا‬
‫افبًض واخلاليا افثإٔة مـ ـؾ شجؾ يَابِـ بًوٓا افبًض وهُذا مع اخلاليا إخرى‪ ،‬فُـ ظْدما‬
‫ٕٖيت فِسجؾ افثافث شْرى أنف ـان جيب أن يُقن هْاك خِٔة ثافثة فَٔابؾ اخلاليا افتل تَع ذم ادرتبة‬
‫افثافثة ذم افسجالت إخرى فُـ ٓ وجقد هلذه اخلِٔة‪ ،‬هلذا وضًْا دمج ‪ colspan‬ظذ (اخلِٔة افثاين‬
‫مـ افسجؾ افثافث) وبَّٔة ‪ 1‬فْبغ أنف جيب هلذه اخلِٔة أن تَابؾ خِٔتغ بدٓ مـ خِٔة واحدة‪-‬‬

‫وأن ماذا فق ـان افسجِتان متَابالن ظامقديا؟‬

‫ؿِْا أنْا ٕستخدم اخلاصٔة ‪ rowspan‬إذا ـان اخلِٔتان يتَابالن ظامقديا وتستخدم بٍْس افىريؼ‬
‫افسابَة ـام أن افتحِٔؾ ٍٕسف فُـ هذه ادرة ٕحِؾ اخلإات ظامقديا وظذ إؽِب يُقن ذم اجلداول‬
‫افتل يُقن افستٔب جإبٔة ـام يبْٔف ادثال افتايل‪9‬‬
‫>‪<table‬‬
‫>‪<tr‬‬

‫>‪</th‬ادقاد >‪<th‬‬

‫>‪</td‬حماشبة افتُافٔػ>‪<td‬‬

‫>‪</td‬اإلؿتهاد اجلزئل>‪<td‬‬

‫‪04/‬‬
 ‫>‪</td‬إدارة افؼاء وافتخزيغ>‪<td‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪ٕ</th‬يؿ ادًِقمات اإلدارية>‪<th‬‬

‫>‪</td‬ؽر مىِقب>‪<td‬‬

‫>‪</td‬منسك>"‪<td rowspan="2‬‬

‫>‪</td‬مىِقب>‪<td‬‬

‫>‪</tr‬‬
‫>‪<tr‬‬

‫>‪ٕ</th‬يؿ ادًِقمات ادحاشبٔة>‪<th‬‬

‫>‪</td‬مىِقب>‪<td‬‬

‫>‪</td‬ؽر مىِقب>‪<td‬‬

‫>‪</tr‬‬
‫>‪</table‬‬

‫افنُؾ ‪7-04‬‬

‫‪040‬‬
 ‫‪ 04-6‬تْسٔؼ اجلداول مع ‪CSS‬‬

‫‪ 04-6-0‬بًض افتْسَٔات افتل شبؼ رؤيتٓا‬

‫شبؼ وأن حتدثْا ظـ مًيؿ افتْسَٔات افتل يُّـ تىبَٔٓا ظذ اجلداول فتحسغ ميٓرها‪ ،‬فُـ‬
‫إلظىاء ؾُرة ظـ تْسٔؼ اجلداول شَْقم بًّؾ مثال واحد ٕستخدم ؾٔف أـثر افتْسَٔات اشتخداما مع‬
‫اجلداول‪ -‬شْستخدم مِػ ‪ xhtml‬اخلاص بادثال رؿؿ ‪ ، 42‬مع تًديؾ بسٔط هل إضاؾة مسك‬
‫’‪ -id= ‘revolution‬وؾٔام يع افتْسَٔات ادستخدمة‪-‬‬
‫{ ‪#revolution‬‬
‫;‪width: 500px‬‬
‫;‪border-collapse: collapse‬‬
‫}‬
‫{ ‪#revolution caption‬‬
‫;‪font-size: 1.5em‬‬
‫;‪text-decoration: underline‬‬
‫}‬
‫{ ‪#revolution td, #revolution th‬‬
‫;‪border: 1px solid #c6d999‬‬
‫;‪padding: 5px‬‬
‫}‬
‫{ ‪#revolution th‬‬
‫;‪font-size: 1.2em‬‬
‫;‪text-align: center‬‬
‫;‪background-color: #A6C950‬‬
‫;‪color: #ffffff‬‬
‫}‬

‫أؾسض أن هذه افتْسَٔات واضحة بافْسبة فؽ‪ ،‬فُـ مع ذفؽ أجدين موىرا أن أذح فؽ شبب‬
‫اشتٓداؾْا فُؾ مـ ‪ td‬و ‪ th‬ذم اجلِّة )‪ -(#revolution td, #revolution th‬افسبب بسٔط جدا‬
‫هق أنْا ٕريد تىبٔؼ هذيـ افتْسَٔتغ (احلدود واحلنق) فُؾ ظْاس رأس اجلدول وـذفؽ ظْاس‬
‫اجلسؿ فذا ؿّْا باشتٓداف آثْغ مًا ـل ٓ ٕوىر إػ تُرار ٍٕس افتْسَٔتغ (‪ border‬و‬
‫‪ )padding‬ذم ادجّقظة افتافٔة (أي ذم ‪-)#revolution th‬‬

‫‪041‬‬
 ‫افنُؾ ‪8-04‬‬

‫‪ 04-6-1‬ثالثة تْسَٔات خاصة باجلداول‬

‫تقجد هْافؽ ثالثة خهائص تستخدم خاصة مع اجلداول‪ ،‬أوهلا هل خاصٔة افتحُؿ بتامشؽ احلدود‬
‫مـ ظدهؿ (شبؼ وحتدثْا ظْف)‪ ،‬أما افثإٔة ؾٓل خاصٔة افتحُؿ بّقضع طٓقر ظْقان اجلدول حٔث‬
‫فٔس مـ افرضوري أن تيٓر ؿبؾ اجلدول بؾ يُّـ أن تيٓر حتتٓا أو حتك ذم احدى اجلإبغ وأخرا‬
‫اخلاصٔة افثافثة هل فِتحُؿ بّقضع طٓقر حمتقى اخلاليا أؾَٔا وذفؽ ظْدما يُقن ضقل اخلِٔة أـز‬
‫مـ حجؿ افْص بداخِٓا حْٔٓا ٕستخدم هذه اخلاصٔة إلطٓار افْص ذم افقشط إؾَل‪ ،‬أو إظذ أو‬
‫إشٍؾ وؾٔام يع بٔان أشامء هذه اخلهائص مع ؿّٔٓا‪9‬‬

‫‪ 9 caption-side -0‬تتحُؿ هذه اخلاصٔة بّقضع طٓقر ظْقان اجلدول وتٖخذ احدى‬
‫افَٔؿ افتافٔة‪9‬‬

‫‪ 9 top‬ييٓر أظذ اجلدول (افَّٔة آؾساضٔة)‬ ‫‪‬‬

‫‪ 9 bottom‬ييٓر أشٍؾ اجلدول‪-‬‬ ‫‪‬‬

‫‪ 9 left‬ييٓر يسار اجلدول‬ ‫‪‬‬

‫‪ 9 right‬ييٓر يّغ اجلدول‬ ‫‪‬‬

‫‪042‬‬
‫‪ 9border-collapse -1‬شبؼ ورأجْا هذه اخلاصٔة وؿِْا أهنا فِتحُؿ بتامشؽ اخلاليا مـ‬
‫ظدمف وهلا ؿّٔتْا مها‪:‬‬

‫‪ 9 separate‬فٍهؾ اخلاليا ظـ بًوٓا افبًض (افَّٔة آؾساضٔة)‬ ‫‪‬‬

‫‪ 9 Collapse‬ترابط ومتاشؽ اخلاليا بًوٓا افبًض‪-‬‬ ‫‪‬‬

‫‪ 9 vertical-align -2‬فِتحُؿ بّقضع طٓقر حمتقى اخلاليا أؾَٔا‪ ،‬وتٖخذ احدى افَٔؿ‬
‫افتافٔة‪9‬‬

‫‪ 9 top‬ييٓر ادحتقى ذم افَسؿ افًِقي مـ اخلِٔة‬ ‫‪‬‬

‫‪ 9 middle‬ييٓر ادحتقى وشط اخلِٔة‬ ‫‪‬‬

‫‪ 9 bottom‬ييٓر ادحتقى ذم افَسؿ افسٍع مـ اخلِٔة‬ ‫‪‬‬

‫‪043‬‬
 ‫افْامذج‬ ‫‪05‬‬

‫تًِب افْامذج دورا ؾًافة ظْد تهّٔؿ مقاؿع افقيب خاصة افديْامُٔٔة مْٓا‪ -‬أؿهد ادقاؿع افتل‬
‫ٕتحُؿ بّحتقاه بّجرد ضٌىة زر حٔث يقضع أي رء يرا د إضاؾتف فِّقؿع أو تًديِف داخؾ ّٕقذج‬
‫ثؿ يتؿ إرشال ؿٔؿ افّْقذج إػ برجمة خاصة يُّْٓا افتًامؾ مع افْامذج – ـزجمة فٌة ‪ –PHP‬حٔث‬
‫تَقم تِؽ افزجمة باشتَبال واشتخراج ؿٔؿ افّْقذج ومـ ثؿ إطٓارها ظذ ادتهٍح أو ٕسخٓا ظذ‬
‫ؿاظدة بٔإات يُّـ اشسجاظٓا ٓحَا ذم أي وؿت إلطٓار حمتقاها ظذ ادتهٍح‪.‬‬

‫إن دورٕا ذم ـؾ هذا يَتك ظذ تهّٔؿ افّْقذج أما اشتَبال واشتخراج ؿّٔٓا إلطٓارها ظذ‬
‫ادتهٍح أو ٕسخٓا ظذ ؿاظدة بٔإات ؾٓل مّٓة فٌات افزجمة افتٍاظِٔة وفـ َٕػ ظْدها هْا‪-‬‬

‫‪ 05-0‬تًريػ ّٕقذج‬

‫فتًريػ افّْقذج ظذ ادتهٍح ٕستخدم افقشؿ ‪ form‬افذي حئط بُامؾ ظْاس افّْقذج‪9‬‬
‫>‪<form‬‬

‫>‪ --‬يتؿ إضاؾة ظْاس افّْقذج هْا—!<‬

‫>‪</form‬‬

‫ؿِت إٍٓا أن ؿٔؿ افّْقذج يتؿ إرشاهلا إػ افزجمة فَٔقم بًّاجلة بٔإاهتا فُـ أجـ يُقن تِؽ افزجمة‬
‫وـٔػ ٕرشؾ هلا بٔإات افّْقذج؟‬

‫هْاك خاصٔتان يتؿ إضاؾتٓام ظذ افقشؿ ‪ form‬أحدمها فِدٓفة ظذ صٍحة افزجمة افتل ٕريد إرشال‬
‫ؿٔؿ افّْقذج إفٔٓا وافثاين يبغ ٕقع وضريَة إرشال افبٔإات واخلاصٔتان مها‪:‬‬

‫‪ 9action‬وتبغ هذه اخلاصٔة مُان إرشال ؿٔؿ افّْقذج وتُقن ذم افًادة صٍحة مزجمة ب٘حدى‬
‫فٌات افزجمة افتٍاظِٔة‪ -‬وفق ؾرضْا أن فٌة افزجمة ذم تِؽ افهٍحة هل ‪ php‬ومِػ صٍحة افزجمة‬
‫اشّٓا ‪ data.php‬إذا يُقن مُان إرشال افبٔإات "‪ action="data.php‬مع مراظاة مسار تقا جد‬
‫ادِػ ؾِق أن ادِػ ‪ data.php‬فٔس ذم ٍٕس ادجِد افذي يتقاجد ؾٔف افهٍحة افتل حتتقي ظذ‬

‫‪044‬‬
‫وفَْؾ أنف ذم جمِد ؾرظل اشّف ‪ barmaja‬إذا شٔهبح ادسار‬ ‫افّْقذج‪،‬‬
‫"‪-action="barmaja/data.php‬‬

‫‪ 9 method‬أما هذه اخلاصٔة ؾٓل فبٔان ٕقع اإلرشال إذ يُّـ فإلرشال أن يُقن مـ افْقع ‪get‬‬
‫ويًْل أن ادًِقمات شرشؾ ظـ ضريؼ افرابىة مباذة وهذه افىريَة خٍٔػ جدا ؾـَٔؿ اإلرشال‬
‫حمدود إػ ‪ 144‬رمز ـام أن ادًِقمات ادرشِة تُقن بارزة ظذ افرابىة ويىِع ظِٔٓا اجلّٔع مما يَِؾ‬
‫مـ ٕسبة أمان ورسية افبٔإات أما افىريَة افثإٔة ؾتسّك ‪ ،post‬وتَقم هذه افىريَة ب٘رشال‬
‫ادًِقمات ظـ ضريؼ ؿْاة خمٍل بحٔث ٓ يىِع ظِٔٓا افزوار وهُذا ٕوّـ افرسية وإمان‪-‬‬

‫إذا ؿّْا ب٘ضاؾة هذيـ اخلاصٔتغ ظذ افقشؿ ‪ form‬ؾسٔهبح افنُؾ افًام فِّْقذج ـام يع‪9‬‬
‫>"‪<form method="post" action="data.php‬‬

‫>‪ --‬يتؿ إضاؾة ظْاس افّْقذج هْا—!<‬

‫>‪</form‬‬

‫واحلغ يتبَك ظِْٔا إضاؾة ظْاس افّْقذج فُـ أوٓ جيب أن ٕنر إػ أن هْاك ٕقظان رئٔسٔة مـ‬
‫افْامذج حسب اشتخداماهتا وافْقع إول هل افْامذج افْهٔة وتتُقن مـ ثالثة ظْاس هل‪ّٕ 9‬قذج‬
‫ٕص مـ شىر واحد‪ّٕ ،‬قذج ـِّة افرس‪ ،‬وّٕقذج ٕص متًدد إشىر أما افْقع افثاين ؾٓل ٕامذج‬
‫اخلٔارات وتتُقن هل أجوا مـ ثالث ظْاس‪ّٕ 9‬قذج اخلٔار ادٍرد‪ّٕ ،‬قذج اخلٔار ادتًدد وّٕقذج‬
‫افَائّة ادْسدفة‪ -‬وهْاك ٕقع أخر فتحّٔؾ مِػ مـ اجلٓاز‪ -‬وأخرا يقجد ٕقظان مـ إزرار مها زر‬
‫اإلرشال و زر إظادة افتًبئة‪-‬‬

‫‪ 05-1‬افْامذج افْهٔة‬

‫‪ 05-1-0‬ظْك ٕيص مـ شىر واحد‬

‫يتوح مـ اشؿ هذا افًْك أنف ٓ يُّـ إضاؾة أـثر مـ شىر ٕيص داخِف‪ ،‬وهق افّْقذج ادستخدم ذم‬
‫خإة إدخال افزيد اإلفُسوين أو اشؿ ادستخدم ذم مجٔع ادقاؿع افتل تتىِب تسجٔؾ دخقل افًوق‪.‬‬

‫ٕستخدم افقشؿ <‪ >input /‬إلضاؾة هذا افًْك وـام أطْؽ ٓحيت هذا‪ ،‬هق وشؿ مٍرد إذا ٓ بد‬
‫فف مـ خاصٔة حتك تٗدي وطٍٔتف‪ -‬تِؽ اخلاصٔة هل ‪ type‬افتل يًْل "ٕقع افّْقذج" وؿّٔتٓا ذم‬

‫‪045‬‬
‫حافتْا هذه هل ‪ -text‬وهْاك خاصٔة أخرى تَقم بتحديد اشؿ افًْك هل ‪ name‬وتستخدم ؿّٔتٓا‬
‫ذم صٍحة مًاجلة افبٔإات –‪ data.php‬ذم ّٕقذجْا هذا‪ ,‬جلِب بٔإات افًْك بقاشىة اشّف‬
‫ويْبٌل أن تًِؿ أن اشؿ افّْقذج يُقن مـ اختٔار ادهّؿ‪.‬‬

‫بًد إضاؾة خاصٔة افْقع وآشؿ يهبح افّْقذج ـام يع‪9‬‬

‫>"‪<form method="post" action="data.php‬‬
‫>‪<input type="text" name="username" /‬‬
‫>‪</form‬‬

‫افْتٔجة‪9‬‬

‫افنُؾ ‪0-05‬‬

‫بافىبع فـ يُقن مـ ادًَقل أن ٕسك افّْقذج ـام هل ذم افنُؾ دون أن ٕخز افزائر ما جيب إضاؾتف‬
‫ـَّٔة داخؾ افّْقذج‪ -‬ؾِق ؾرضْا أن افًْك ذم افنُؾ افسابؼ هق‪ّٕ 9‬قذج وضع اشؿ ادستخدم‬
‫ؾسْوىر أن ُٕتب أمامف "اشؿ ادستخدم"‪-‬‬

‫ٕستخدم افقشؿ ‪ label‬فًٍؾ ذفؽ حٔث ٕوًف ؿبؾ افًْك ثؿ َٕقم بربط افًْكيـ مًا ظـ ضريؼ‬
‫اضاؾة خاصٔة ‪ id‬ظذ ظْك افّْقذج (أي داخؾ ‪ )input‬ثؿ َٕقم ـذفؽ ب٘ضاؾة خاصٔة ‪ for‬ظذ‬
‫افتسّٔة (افقشؿ ‪ )label‬ثؿ ٕختار اشؿ يُقن ؿّٔة فِخاصٔتغ ‪ id‬و ‪ for‬وهُذا ُٕقن ؿد ربىْا بغ‬
‫ظْك افّْقذج وافتسّٔة اخلاص بف وظْدما يَقم افزائر بافَْر ظذ افتسّٔة (اشؿ ادستخدم مثال)‬
‫يْتَؾ مٗذ افُتابة مباذة إػ افًْك ‪ input‬افتل حتّؾ اخلاصٔة ‪ id‬ذات ٍٕس افَّٔة ادقجقد ذم‬

‫‪046‬‬
‫اخلاصٔة ‪ for‬فِتسّٔة افتل َٕر ظِٔف افزائر‪ ،‬وٓ بٖس بٖن تُقن ؿّٔة اخلاصٔتغ ٍٕس ؿّٔة اخلاصٔة‬
‫‪ name‬ذم افقشؿ ‪-input‬‬
‫>"‪<form method="post" action="data.php‬‬

‫> "‪<label for="username‬‬ ‫>‪: </label‬اشؿ ادستخدم‬

‫>‪<input type="text" name="username" id="username" /‬‬
‫>‪</form‬‬

‫افنُؾ ‪1-05‬‬

‫إضاؾة فِخهائص ادذـقرة شابَا هْاك بًض اخلهائص افتل تبدوا مٓام أجوا ـتحديد حجؿ ضقل‬
‫افّْقذج أو حتديد ؿّٔة ؿهقى فَّٔتف وـذفؽ إظىائف ؿّٔة اؾساضٔة وؾٔام يع ذح تِؽ اخلهائص‬
‫واشتخداماهتا‪9‬‬

‫‪ 9 size‬يُّـ اشتخدام هذه اخلاصٔة فتحديد ضقل افّْقذج‪ ،‬وذم حال ظدم حتديد ضقل افّْقذج‬
‫ؾسُٔقن ضقفف آؾسايض يُقن ‪ 1/‬بُسؾ‪-‬‬

‫‪ 9maxlength‬تستخدم هذه اخلاصٔة فتحديد افىقل افَهقى افذي يُّـ فِّْقذج‬ ‫‪‬‬
‫اشتًٔابف ؾّثال ّٕقذج افْص مـ شىر واحد يستقظب ‪ 144‬رمز فُـ ظْدما ٕحدد ؿّٔة‬
‫ؿهقى ‪01‬رمزا ”‪ maxlength=”12‬ؾِـ يَبؾ افّْقذج اشتًٔاب أـثر مـ هذه آثْتل‬
‫ظؼة رمز‪.‬‬

‫‪ 9 value‬أما هذه اخلاصٔة ؾْستخدمٓا مـ إلظىاء افّْقذج ؿّٔة اؾساضٔة ييٓر ظْد ؾتح‬ ‫‪‬‬
‫افهٍحة ظذ ادتهٍح‪ٕ -‬ستٍٔد مـ هذه اخلاصٔة ظْدما ٕريد أن ٕرشؾ ؿّٔة اؾساضٔة ذم‬

‫‪047‬‬
 ‫حال مل يَؿ افزائر بتًبئة افّْقذج أو ظْدما ٓ ٕريد إضاؾة تسّٔة فِّْقذج ـام ذم بًض‬
‫ادقاؿع حٔث يتؿ وضع ؿّٔة اؾساضٔة تؼح افَّٔة ادراد إضاؾتف داخؾ افّْقذج أو تُقن‬
‫بّثابة مثال ظِٔف‪ -‬وادثال افتايل يقضح ـٍٔٔة اشتخدام مجٔع هذه اخلهائص‪-‬‬
‫>"‪<form method="post" action="data.php‬‬

‫>"‪<label for="username‬‬ ‫>‪: </label‬اشؿ ادستخدم‬

‫"‪<input type="text" name="username" id="username‬‬
‫>‪" /‬إمغ"=‪size="25" maxlength="12" value‬‬

‫>‪</form‬‬

‫‪ّٕ 05-1-1‬قذج ـِّة افرس‬

‫ّٕقذج ـِّة افرس هق ٍٕسف ّٕقذج افْص مـ شىر واحد شقاء ذم صُِٓا أم ذم ـٍٔٔة إضاؾتف حٔث‬
‫َٕقم ؾَط بتٌٔر ؿّٔة ٕقع افّْقذج ‪ type‬مـ ‪ text‬إػ ‪ password‬وهُذا تتحقل ّٕقذج افْص مـ‬
‫شىر واحد إػ ّٕقذج ـِة رس‪ -‬فتجربة هذا افّْقذج ؿؿ ب٘ضاؾة إوامر افتافٔة ذم هناية افقشؿ ‪input‬‬

‫ظذرا‪---‬‬
‫مـ ادثال افسابؼ ثؿ ؿؿ بتجربة ادِػ اجلديد‪9‬‬

‫>‪<br /‬‬ ‫>‪--‬تؿ اشتخدام هذا افقشؿ فالٕتَال إػ افسىر—! <‬

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

‫>"‪<label for="pass‬‬ ‫>‪ : </label‬ـِّة افرس‬
‫"‪<input type="password" name="pass" id="pass" size="25‬‬
‫>‪maxlength="12" /‬‬

‫شُٔقن ٕتٔجة هذا ادثال إضاؾة فألوامر ذم ادثال افسابؼ‪ 9‬طٓقر افّْقذجان حتت بًوٓام افبًض‬
‫(بسبب افقشؿ >‪ ،)<br /‬وظْد ادخال رء ذم ّٕقذج ـِّة افرس ؾ٘ن افرمقز افياهرة شتُقن خمٍٔة‬
‫وتيٓر بدٓ مْٓا دوائر شقداء‪-‬‬

‫‪ّٕ 05-1-2‬قذج ٕيص متًدد إشىر‬

‫ينبف ّٕقذج افْيص متًدد إشىر ذاك افّْقذج افذي ٕستخدمف ذم مًيؿ ادقؿع فِتًِٔؼ ظذ مقضقع‬
‫ما‪ ،‬خاصة ذم ادْتديات‪-‬‬

‫‪048‬‬
‫إلضاؾة ّٕقذج ٕيص متًدد إشىر ٕستخدم افقشؿ ادزدوج <‪ >textarea></textarea‬افذي‬
‫يًْل (مْىَة‪,‬مساحة ٕص)‪ ،‬ومـ ٕاحٔة اخلهائص يُّـ إضاؾة ٍٕس اخلهائص افسابَة ـاخلاصٔة‬
‫‪ name‬و ‪ ،id‬فُـ افَّٔة آؾساضٔة هذه ادرة ٓ يتؿ إضاؾتف ذم اخلاصٔة ‪ value‬بؾ يتؿ إضاؾتف‬

‫ظذرا‪---‬‬
‫مباذة بغ وشّل آؾتتاح و اإلؽالق‪-‬‬

‫>‪</textarea‬افَّٔة آؾساضٔة>‪<textarea‬‬

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

‫هْاك اختالف آخر إضاؾة هلذا أٓ وهق ـٍٔٔة حتديد حجؿ افّْقذج‪ ،‬ؾٍل افْامذج افسابَة ـْا ٕستخدم‬
‫اخلاصٔة ‪ size‬فُـ إمر خيتِػ مع افقشؿ ‪ textarea‬حٔث يقجد ضريَتان خمتٍِتان فتحديد فًٍؾ‬
‫ذفؽ‪9‬‬

‫إما بقاشىة ‪ css‬وظْدها ٕستخدم ‪ width‬و ‪height‬‬ ‫‪‬‬

‫أو ظـ ضريؼ خاصٔتغ جديديـ مها ‪ rows‬فتحديد حجؿ افىقل(ظدد إشىر) و ‪cols‬‬ ‫‪‬‬
‫فتحديد حجؿ افًرض وادثال افتايل يقضح ذفؽ‪-‬‬
‫>"‪<form method="post" action="data.php‬‬
‫>‪ :</label><br /‬إضاؾة تًِٔؼ>"‪<label for="comment‬‬

‫"‪<textarea name="comment" id="comment" rows="12‬‬

‫>‪</textarea‬افَّٔة آؾساضٔة>"‪cols="40‬‬

‫>‪</form‬‬

‫‪05/‬‬
 ‫افنُؾ ‪2-05‬‬

‫مالحية‪ 9‬اخلاصٔتان ‪ rows‬و ‪ ٓ cols‬حيددان حجام حمدد إلدخال ؿّٔة افّْقذج ـام هل احلال ذم‬
‫‪ maxlength‬بؾ حيددان احلجؿ افذي شٔيٓر بف افّْقذج ظذ ادتهٍح وبافتايل إذا تؿ إدخال ٕص‬
‫أـز مـ ادحدد ذم تِؽ اخلاصٔتان ييٓر ذيط مترير متُـ افَارئ مـ إمتام إدخال ما يرؽب بف مـ‬
‫افْهقص‪-‬‬

‫‪ٕ 05-2‬امذج اخلٔارات‬

‫ظذرا‪---‬‬
‫ؿد ٕقد أحٔإا أن ٕسٖل افزائر بًض ادًِقمات ظْف فُـ فق وضًْا ّٕقذج ٕيص ظادي ؾَد يُقن‬
‫افتًبر ظـ تِؽ ادًِقمة خمتٍِة مـ زائر إػ آخر‪ ،‬ؾّثال فق ضِبْا مـ افزائر ذـر ٕقع جْسف ؾَد يٖيت‬
‫أحدهؿ ويُتب (ذـر أو أنثك) ثؿ يٖيت آخر ؾُٔتب (رجؾ أو بْت) وهُذا يُقن ادًْك ٍٕسف فُـ‬

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

‫افُِامت خمتِػ ـام أنْا ؿد ٕسٖل افزائر ظـ هقاياتف ؾٔبدأ بذـر هقايات ؽريبة ٓ يرؽب بف ادقؿع هلذا‬
‫ِٕجٖ فْامذج اخلٔارات فتحديد خٔارات ادستخدم‪-‬‬

‫وؿد ؿِْا أن ٕامذج اخلٔارات تتُقن مـ ثالثة أنقاع هل آختٔار ادٍرد وادتًدد وآختٔار مـ ؿائّة‬
‫مْسدفة وشْتحدث ظْٓا بٍْس افستٔب ؾٔام يع‪9‬‬

‫‪050‬‬
 ‫‪ّٕ 05-2-0‬قذج اخلٔار ادٍرد‬

‫ذـرٕا ذم مَدمة هذا افْقع مـ افْامذج ظـ شٗافْا افزا ئر فْقع جْسف‪ ،‬وٕحـ ٕالحظ ذم هذه ادًِقمة أن‬
‫افزائر ٓ يُّـ أن يُقن إٓ ذـرا أو أنثك وٓ يُّـ أن يُقن ذـرا وأنثك ذم ٍٕس افقؿت هلذا جيب‬
‫إضاؾة ّٕقذج اختٔار ٓ يسّح باختٔار أـثر مـ خٔار واحد‪ -‬ذاك افّْقذج جيب أن يُقن مـ افْقع‬

‫ظذرا‪---‬‬
‫‪ radio‬افذي ينبف متاما افّْقذج افْيص مـ شىر واحد مـ حٔث أوامر إضاؾتف حٔث َٕقم ؾَط بتٌر‬
‫افْقع فٔهبح‪ type=”radio” 9‬وبافْسبة فِتسّٔة ؾٓل هْا إجبارا إذ هل افتل شتبغ فِزائر ما خيتاره‪-‬‬
‫وشَْقم بقضًف بًد افّْقذج ظذ ظُس افّْقذج افْيص مـ شىر واحد افذي ـْا ٕوع افتسّٔة ؿبؾ‬
‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬ ‫افّْقذج‪-‬‬

‫مـ ادُّـ جًؾ احدى اخلٔارات خمتارة مسبَة بّجرد ؾتح افهٍحة‪ ،‬بحٔث يتؿ ارشال هذه افَّٔة‬
‫اؾساضٔا ذم حال مل يَؿ افزائر باختٔار خٔار آخر‪ -‬اخلاصٔة ادستخدمة فًٍؾ ذفؽ هل ‪checked‬‬
‫وَٕقم بتُرار ٍٕس آشؿ ـَّٔة ("‪ )checked="checked‬وادثال افتايل يقضح ذفؽ‪9‬‬
‫>"‪<form method="post" action="data.php‬‬
‫>‪</label><br /‬ما هق ٕقع جْسؽ ؟>‪<label‬‬

‫"‪<input type="radio" name="sex" value="male‬‬ ‫"‪id="male‬‬

‫>‪/‬‬

‫>‪</label><br /‬ذـر>"‪<label for="male‬‬

‫"‪<input type="radio" name="sex" value="female‬‬

‫>‪id="female" /‬‬

‫>‪</label‬أنثك>"‪<label for="female‬‬

‫>‪</form‬‬

‫‪051‬‬
 ‫افنُؾ ‪3-05‬‬

‫هْاك أمران مٓامن جيب افتْبٔف إفٔٓام ذم هذا ادثال‪ ،‬إمر إول هق بخهقص ربط افتسّٔة (‪)label‬‬
‫بافّْقذج (‪ )input‬حٔث أنْا ٕستخدم ‪ label‬و ‪ input‬فُؾ خٔار ما يًْل أن ؿّٔة اخلاصٔتغ ‪ for‬و‬
‫‪ id‬شُٔقن ٍٕسٓا ؾَط ذم ـؾ خٔار وفٔس ذم مجٔع اخلٔارات وهلذا ٕرى ذم هذا ادثال أن افَّٔة اخلاص‬

‫ظذرا‪---‬‬
‫هباذيـ اخلاصٔتغ ذم اخلٔار إول هل ‪ male‬بْٔٓام ؿّٔٓام ذم اخلٔار افثاين هل ‪ -female‬أما إمر‬
‫افثاين ؾٓق بخهقص افَّٔة افتل يتؿ ارشاهلا حٔث أنف جيب دائام اضاؾة ؿّٔة فِخاصٔة ‪ value‬فتُقن‬
‫هل افَّٔة افتل شٔتؿ ارشاهلا إػ صٍحة افزجمة أما ظْد ظدم اشتخدام هذه اخلاصٔة ؾادتهٍح شتَقم‬
‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬
‫ب٘رشال افَّٔة » ‪ « on‬أي أنف تؿ اختٔار خٔار فُـ أهيام ؟ ادتهٍح ٓ يًرف ذفؽ إٓ مـ خالل‬
‫اخلاصٔة ‪ value‬ؾٍل هذا ادثال شٔتؿ ارشال افَّٔة » ‪ « male‬إذا ؿام افزائر باختٔار » ذـر« أو ارشال‬
‫» ‪ « female‬ذم حال اختٔار » أنثك«‪-‬‬

‫‪ّٕ 05-2-1‬قذج اخلٔار ادتًدد‬

‫ذـرٕا مثآ ظـ شٗافْا افزائر فْقع جْسف ذم بداية احلديث ظـ هذا افْقع مـ افْامذج‪ -‬وؿد اظتّدٕا ظذ‬
‫هذا ادثال ذم ذح ّٕقذج آختٔار ادٍرد‪ ،‬فُـ ذم ٍٕس افقؿت ذـرٕا مثآ ظـ شٗافْا افزائر ظـ‬
‫هقا ياتف وؿِْا أنف فق تؿ افىِب مـ افزائر أن يوًٓا ذم ّٕقذج ٕيص ظادي ؾَد يَقم أحدهؿ بذـر‬
‫هقايات ؽريبة ٓ يرؽب بف ادقؿع فذا مـ إؾوؾ حتديد اهلقا يات ادرؽقبة ثؿ افسامح فِزائر باختٔار ما‬

‫‪052‬‬
‫يْاشبف مْٓا‪ -‬فُـ هذه ادرة فـ تُقن ـْقع اجلْس ؾافزائر ؿد يُقن ظْده أـثر مـ هقاية فذا جيب أن‬
‫ٕسّح فف بٖـثر مـ خٔار‪-‬‬

‫إلضاؾة ّٕقذج متًدد اخلٔار ٕستخدم ٍٕس افقشقم ذم ادثال افسابؼ مع تٌٔر ؿّٔة خاصٔة افْقع‬
‫ظذرا‪---‬‬
‫‪ type‬إػ ‪ checkbox‬واخلهائص افباؿل ـام هل بام ؾٔٓا ‪ checked‬جلًؾ اخلٔار خمتارة مسبَا‬
‫(يُّـ جًؾ أـثر مـ خٔار خمتارة مسبَا مادام ٕتًامؾ مع ّٕقذج متًدد اخلٔار)‪-‬‬

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

‫خيتِػ هذا افّْقذج ظـ شابَٓا ذم اخلاصٔة ‪ name‬حٔث جيب اظىائٓا ؿّٔة خمتٍِة ـؾ مرة وذفؽ‬
‫ـل ٕستىٔع افتٍريؼ بغ اخلٔارات افتل اختاره افزائر وما مل خيسه‪ ،‬وـذفؽ ذم اخلاصٔة ‪ value‬حٔث‬
‫يُّْْا آشتٌْاء ظْف ذم هذا افّْقذج‪ ،‬وذم هذه احلافة فـ يتؿ ارشال ؿّٔتٓا بؾ شٔتؿ ارشال ـِّة ‪on‬‬
‫ما يًْل أن ادزمج يستىٔع ؾَط مـ افتحَؼ مـ ؿٔام افزائر باختٔارها أم ٓ‪ -‬وادثال افتايل يبغ ـٍٔٔة‬
‫اضاؾة هذا افْقع مـ افْامذج‪9‬‬
‫>"‪<form method="post" action="data.php‬‬

‫>‪</label><br /‬ما هل هقاياتؽ ؟>‪<label‬‬

‫>‪<input type="checkbox" name="swiming" id="swiming" /‬‬

‫>‪</label><br /‬افسباحة>"‪<label for="swiming‬‬

‫>‪<input type="checkbox" name="football" id="football" /‬‬

‫>‪</label><br /‬ـرة افَدم>"‪<label for="football‬‬

‫"‪<input type="checkbox" name="reading" id="reading‬‬

‫>‪checked="checked"/‬‬
‫>‪</label><br /‬افَراءة وادىافًة>"‪<label for="reading‬‬

‫"‪<input type="checkbox" name="photography‬‬

‫>‪id="photography" /‬‬
‫>‪</label><br /‬افتهقير>"‪<label for="photography‬‬

‫>‪<input type="checkbox" name="fishing" id="fishing" /‬‬

‫>‪</label><br /‬افهٔد افبحري>"‪<label for="fishing‬‬

‫>‪</form‬‬

‫‪053‬‬
 ‫افنُؾ ‪4-05‬‬

‫‪ّٕ 05-2-2‬قذج افَائّة ادْسدفة‬

‫تًد هذا افّْقذج جمرد ـقـتٔؾ فْامذج اخلٔارات إذ يُّـ افسامح باختٔار مٍرد أو اختٔار متًدد فُـ‬
‫افًزة مْف هق أنف يَقم باختهار ادساحة افتل ـان شٔستحقذ ظِٔٓا افّْقذج ذم حال ـان اخلٔارات‬
‫ـثرة جدا ـام ذم حال إضاؾة ّٕقذج‪ 9‬اختٔار بِد افزائر‪ -‬ؾِق أردٕا أن ٕؤػ ؿائّة افدول افًربٔة ذم‬
‫ظذرا‪---‬‬
‫ّٕقذج اختٔار مٍرد ؾسٔستحقذ افّْقذج ظذ مساحة ـبرة ـٍاية ؾام بال فق أردٕا أن ٕؤػ ؿائّة دول‬
‫افًامل ـِف؟ هلذا َٕقم باشتخدام هذا افْقع مـ افّْقذج‪-‬‬

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

‫إلضاؾة ّٕقذج ؿائّة مْسدفة ٕستخدم افقشؿ <‪ >select></select‬فتًريػ افّْقذج ثؿ ٕؤػ‬
‫ظْاس افّْقذج باشتخدام افقشؿ <‪ >option></option‬بحٔث ـؾ وشؿ ‪ option‬يّثؾ خٔار‬
‫واحد‪ -‬أما بافْسبة فِخهائص ؾْستخدم ٍٕس اخلهائص ذم افْامذج افسابَة أمثال (‪ name‬و ‪ id‬و‬
‫‪ for‬ويواؾان ظذ افقشؿ ‪ select‬وفٔس ‪ )option‬إضاؾة فِخاصٔة ”‪selected=”selected‬‬
‫بدٓ مـ اخلاصٔة ‪ ”checked=”checked‬جلًؾ أحد اخلٔار حمددة مسبَا ريثام خيتار افزائر ما‬
‫يْاشبف‪-‬‬

‫ويْبٌل افًِؿ أنف إذا تؿ إضاؾة خاصٔة ‪ value‬ؾَّٔتٓا هل افٔل شرشؾ وفٔست افَّٔة افياهرة ظذ‬
‫افناصة أما إذا مل يتؿ وضع خاصٔة ‪ value‬ؾافَّٔة ادرشِة هل افياهرة ظذ افناصة‪ ،‬وذم ـؾ إحقال‬

‫‪054‬‬
‫جرت افًادة أن يتؿ وضع خاصٔة ‪ value‬حيّؾ ٍٕس افَّٔة افتل تيٓر فِزائر فُـ ذم بًض إحٔان‬
‫حيّؾ ؿّٔة خمتِػ حسب حاجة ادهّؿ‪ -‬وؾٔام يع مثال ظذ ّٕقذج اختٔار مـ ؿائّة مْسدفة‪9‬‬
‫>"‪<form method="post" action="data.php‬‬

‫>‪</label><br /‬رجاء‪ ،‬ؿؿ باختٔار بِدك ؟>"‪<label for="country‬‬

‫>"‪<select name="country" id="country‬‬

‫ظذرا‪---‬‬
‫>‪</option‬ادُِّة افًربٔة افسًقدية>"‪<option value="sa‬‬

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

‫>‪</option‬آمارات افًربٔة ادتحدة>"‪<option value="uae‬‬

‫>‪</option‬مجٓقرية مك افًربٔة>"‪<option value="eg‬‬

‫>‪</option‬مجٓقرية افَّر ادتحدة>"‪<option value="km‬‬

‫>‪</select‬‬
‫>‪</form‬‬

‫افنُؾ ‪5-05‬‬

‫تَسٔؿ اخلٔارات إػ جمّقظات‪9‬‬

‫مـ ادُّـ تَسٔؿ خٔارات ّٕقذج افَائّة ادْسدفة إػ جمّقظات خمتٍِة بحٔث ٕجّع ـؾ ظدد مـ‬
‫اخلٔارات ذم جمّقظة‪ ،‬وًٍٕؾ ذفؽ فتسٓٔؾ وصقل افزائر فِخٔار افذي يْاشبف ـٖن ٕجّع دول افًامل‬
‫افًريب ذم جمّقظة ودول أوربا ذم جمّقظة أخرى ودول أمريُا اجلْقبٔة ذم جمّقظة إػ آخره‪-‬‬

‫‪055‬‬
‫ٕستخدم افقشؿ <‪ >optgroup></optgroup‬فًٍؾ ذفؽ ويْبٌل أن ٕحرص ظذ أن حئط هذا‬
‫افقشؿ خٔارات ـؾ جمّقظة‪ -‬ـام يْبٌل أجوا إظىاء ـؾ جمّقظة اشؿ مْاشب فؼح ما يتوّْف تِؽ‬
‫ادجّقظة وذفؽ باشتخدام خاصٔة جديدة تسّك ‪ label‬ؿّٔتٓا يُقن اشؿ ادجّقظة‪ -‬وؾٔام يع‬

‫ظذرا‪---‬‬
‫تًديؾ ادثال افسابؼ ب٘ضاؾة بِديـ ظربٔغ و بِديـ أوربٔغ‪9‬‬
‫>"‪<form method="post" action="data.php‬‬

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

‫>‪</label><br /‬رجاء‪ ،‬ؿؿ باختٔار بِدك ؟>"‪<label for="country‬‬

‫>"‪<select name="country" id="country‬‬

‫>"افقضـ افًريب"=‪<optgroup label‬‬

‫>‪</option‬ادُِّة افًربٔة افسًقدية>"‪<option value="sa‬‬

‫>‪</option‬آمارات افًربٔة ادتحدة>"‪<option value="uae‬‬

‫>‪</optgroup‬‬

‫>"أوربا"=‪<optgroup label‬‬

‫>‪</option‬مجٓقرية ؾرٕسا>"‪<option value="eg‬‬

‫>‪</option‬مجٓقرية إيىافٔا>"‪<option value="km‬‬

‫>‪</optgroup‬‬
‫>‪</select‬‬
‫>‪</form‬‬

‫‪056‬‬
 ‫افنُؾ ‪6-05‬‬

‫افسامح فِزائر باختٔار أـثر مـ خٔار‪9‬‬

‫ذـرٕا أن هذه افّْقذج جمرد ـقـتٔؾ ظـ ٕامذج اخلٔارات ؾٓل تسّح بآختٔار ادٍرد وـذفؽ آختٔار‬
‫ادتًدد ورأجْا ـٔػ أن آختٔار يُقن مـ افْقع افٍرد بّجرد إضاؾة افّْقذج فُـ ـٔػ ٕجًِٓا‬
‫متًدد اخلٔار؟‬

‫ؿبؾ حتقيؾ هذه افّْقذج إػ ّٕقذج متًدد اخلٔار ٓبد مـ إضاؾة اخلاصٔة ‪ size‬ظذ افقشؿ ‪select‬‬
‫جلًؾ افّْقذج ـبر بحٔث يُّـ رؤية أـثر مـ خٔار بّجرد مًايْة افهٍحة وهل تستخدم بٍْس‬
‫إشِقب ادذـقر ذم ٕامذج افْص مـ شىر واحد فُـ ذم تِؽ احلافة ـإت تتحُؿ بىقل افّْقذج أما‬
‫هْا ؾستتحُؿ بافًرض(ؾقق فتحت)‪-‬‬

‫أما اخلىقة افثإٔة ؾٓق إضاؾة اخلاصٔة ”‪ multiple=”multiple‬ظذ افقشؿ ‪ select‬وهُذا يُقن‬
‫شّحْا فِزائر باختٔار أـثر مـ خٔار‪ ،‬ويُّْؽ دمربة ذفؽ بٍْسؽ‪-‬‬

‫‪ّٕ 05-3‬قذج اختٔار مِػ فِتحّٔؾ‬

‫هْاك ّٕقذج أخر مِحؼ بافْامذج افْيص؛ هق ّٕقذج اختٔار مِػ مـ اجلٓاز اشتًدادا فتحِّٔف‬
‫ومًاجلتف مـ ؿبؾ احدى افزجمٔات افتىبَٔٔة‪-‬‬

‫‪057‬‬
‫ؿبؾ إضاؾة ّٕقذج مـ هذا افْقع جيب إضاؾة اخلاصٔة ‪ enctype‬ظذ وشؿ تًريػ افّْقذج ‪from‬‬
‫وبافًادة حتّؾ افَّٔة ‪ -multipart/form-data‬أما إلضاؾة افّْقذج ؾْستخدم افقشؿ ‪ input‬مع‬
‫ٍٕس خهائهف افسابَة مع تٌٔر افْقع إػ ‪ file‬ـام يبْٔف ادثال افتايل‪9‬‬
‫"‪<form method="post" action="data.php‬‬
‫>"‪enctype="multipart/form-data‬‬
‫>‪: </label><br /‬رجاء ؿؿ باختٔار مِػ فِتحّٔؾ>"‪<label for="doc‬‬

‫"‪<input type="file‬‬ ‫>‪name="doc" id="doc" /‬‬

‫>‪</form‬‬

‫‪ 05-4‬تَسٔؿ افْامذج إػ جمّقظات‬

‫ؿد يُقن افّْقذج ـبرة جدا وحيتقي ظذ مًِقمات متبايْة‪ -‬ـؾ جمّقظة مـ ادًِقمات يُّـ أن‬
‫تنُؾ حتافػ ؾٔام بْٔٓا ـادًِقمات افنخهٔة فِزائر أو هقاياتف ادٍوِة‪ ،‬فذا حتك ٕجًؾ افّْقذج‬
‫واضحا ـٍاية بافْسبة فِزائر وٓ ٕسك جمآ فِتنتت بسبب ـز حجؿ افّْقذج ِٕجٖ فِتَسٔؿ ؾْجًؾ‬

‫ظذرا‪---‬‬
‫ـؾ مًِقمات متناهبة ذم جمّقظة يتؿ إحاضتٓا بحدود اؾسايض ويُقن هلا اشؿ يؼح تِؽ افٍئة مـ‬
‫ادًِقمات‪ -‬هذا ما َٕهده مـ هذا افًْقان‪-‬‬

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

‫افقشؿ‬ ‫داخؾ‬ ‫ادجّقظة‬ ‫ظْاس‬ ‫بقضع‬ ‫َٕقم‬ ‫افّْقذج‬ ‫داخؾ‬ ‫جمّقظة‬ ‫إلٕناء‬
‫<‪ >fieldset></fieldset‬ثؿ ٕستخدم افقشؿ <‪ >legend></legend‬بًد ‪ fieldset‬إلظىاء‬
‫ادجّقظة اشؿ يدل ظذ حمتقاه ـام يقضحٓا ادثال افتايل‪9‬‬
‫"‪<form method="post" action="data.php‬‬
‫>"‪enctype="multipart/form-data‬‬
‫>‪<fieldset‬‬

‫>‪</legend‬مًِقماتؽ افنخهٔة>‪<legend‬‬

‫>‪</label‬آشؿ>"‪<label for="firstname‬‬

‫"‪<input type="text" name="firstname" id="firstname‬‬

‫>‪size="25" /> <br /‬‬
‫>‪</label‬اشؿ افًائِة>"‪<label for="lastname‬‬

‫"‪<input type="text" name="lastname" id="lastname‬‬

‫>‪size="25" /‬‬
‫>‪</fieldset‬‬

‫‪058‬‬
 <fieldset>
<legend>‫<هقاياتؽ ادٍوِة‬/legend>

---‫ظذرا‬
<input type="checkbox" name="swiming" id="swiming" />
<label for="swiming">‫<افسباحة‬/label><br />

<input type="checkbox" name="football" id="football"

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

/>

<label for="football">‫<ـرة افَدم‬/label><br />

<input type="checkbox" name="reading" id="reading"

checked="checked"/>

<label for="reading">‫<افَراءة وادىافًة‬/label><br />

<input type="checkbox" name="photography"

id="photography" />

<label for="photography">‫<افتهقير‬/label><br />

<input type="checkbox" name="fishing" id="fishing" />

<label for="fishing">‫<افهٔد افبحري‬/label><br />

</fieldset>
</form>

06/
 ‫افنُؾ ‪7-05‬‬

‫‪ 05-5‬إزرار (زر آرشال و زر ادسح)‬

‫إن اهلدف مـ زر آرشال هق افَٔام ب٘رشال بٔإات افّْقذج إػ صٍحة افزجمة افتل شٔتؿ ؾٔٓا‬
‫مًاجلتٓا أما زر ادسح – أو زر اظادة افتًبئة‪ ,‬ؾٓدؾٓا مسح ـامؾ ادحتقى اددخِة ذم افّْقذج‬
‫فِسامح فِزائر ب٘ظادة تًبئتٓا مـ جديد‪-‬‬

‫ظذرا‪---‬‬
‫يتؿ إضاؾة ـال افزريـ بقاشىة افقشؿ ‪ , input‬بٍْس إشِقب افذي تًقدٕا ظذ اشتخدام هذا‬
‫افقشؿ ‪ ,‬مع تٌٔر ؿّٔة افْقع ‪ type‬إػ ‪ submit‬فزر اإلرشال أو ‪ reset‬فزر إظادة افتًبئة‪ ،‬ويُّـ‬

‫متقؾرافزائر‪9‬ذم افْسخة ادجإٔة‬ ‫هذا افَسؿ ؽر‬

‫إضاؾة خاصٔة ‪ value‬فالثْغ ييٓر ؿّٔتٓا دخاضبة‬
‫"‪<form method="post" action="data.php‬‬
‫>"‪enctype="multipart/form-data‬‬
‫>‪<fieldset‬‬

‫‪060‬‬
 <legend>‫رجاء ؿؿ ب٘دخال مًِقماتؽ فتسجٔؾ افدخقل‬: </legend>

<label for="username">‫<اشؿ ادستخدم‬/label>

---‫ظذرا‬
<input type="text" name="username" id="username"
size="25" /> <br />

<label for="pass">‫<ـِّة افرس‬/label>

‫هذا افَسؿ ؽر متقؾر ذم افْسخة ادجإٔة‬

<input type="password" name="pass" id="pass" size="25"
/><br />

<input type="submit" value="‫ "تسجٔؾ افدخقل‬/>

<input type="reset" value="‫ "اظادة افتًبئة‬/>

</fieldset>
</form>

8-05 ‫افنُؾ‬

061
 ‫‪ 05-6‬تْسٔؼ افْامذج‬

‫‪ 05-6-0‬بًض افتْسَٔات‬

‫حلسـ احلظ فَد تًِّْا ـؾ ما يِزمْا فتْسٔؼ افْامذج وٓ يقجد خهائص جديدة فذفؽ إٓ ما ـان مـ‬
‫صبف اخلاصٔة‪ focus9‬افذي ٕستخدمف فتٌٔر تْسٔؼ افّْقذج ظْدما يُقن مٗذ افُتابة داخِف ؾّثال‬
‫فق تؿ تىبٔؼ‪9‬‬
‫}; ‪input:focus {background-color:blue‬‬

‫ؾ٘ن ـؾ ظْك يستخدم افقشؿ ‪ input‬شٔتٌر فقن خٍِٔتف فألزرق ظْدما يُقن ادٗذ داخِف‪ ،‬وؾٔام‬
‫يع مثال ظـ تْسٔؼ ّٕقذج باشتخدام خمتِػ افتْسَٔات افتل شبؼ وتًِّْاها حتك أن‪ٕ ،‬ىبَٓا ظذ‬
‫مثال افنُؾ ‪ 0,05‬أظاله‪-‬‬
‫{ ‪form‬‬
‫;‪width: 400px‬‬
‫}‬
‫{ ‪form fieldset‬‬
‫;‪background-color: #eee‬‬
‫;‪margin-bottom: 7px‬‬
‫}‬
‫{ ‪form fieldset legend‬‬
‫;‪border: 1px solid #ccc‬‬
‫;‪padding: 2px‬‬
‫;‪font-weight: bold‬‬
‫}‬
‫{ ‪form fieldset input:focus‬‬
‫;‪background-color: #ccdd99‬‬
‫}‬

‫فَد ؿّْا أوٓ بتحديد حجؿ ‪ 3//‬بُسؾ فِّْقذج ـُؾ ثؿ ظّدٕا إػ تٌٔر فقن خٍِٔة ادجّقظات‬
‫إػ ‪ #eee‬مع إضاؾة حاصٔة شٍع بَّٔة ‪ 6‬إلبًاد ادجّقظتغ ظـ بًوٓام افبًض‪ -‬أما بافْسبة‬
‫دسّٔات ادجّقظات (‪ )legend‬ؿّْا ب٘ضاؾة حدود ثؿ حنق داخع بَّٔة ‪ 1‬بُسؾ متْع متاشؽ‬

‫‪062‬‬
‫افْص باحلدود وأخرا اشتخدمْا صبف اخلاصٔة ‪ input :focus‬فتٌٔر فقن ّٕقذج افْص ظْدما يُقن‬
‫ادٗذ داخِف‪-‬‬

‫افنُؾ ‪0/-05‬‬

‫‪ 05-6-1‬ترتٔب ظْاس افّْقذج‬

‫إذا ٓحيت افنُؾ افسابؼ شتجد أن ظْاس افّْقذج فٔست مرتبة‪ ،‬وهذا بسبب اختالف أضقال‬
‫افتسّٔة بافْسبة فُؾ ظْك داخؾ افّْقذج فُـ يُّـ حؾ ذفؽ بجًؾ افتسّٔات ‪ label‬ـِٓا ظذ‬
‫حجؿ ضقل أـز مسّك (اشؿ افًائِة ذم افنُؾ افسابؼ)‪ -‬فُـ بام أن ‪ label‬هق وشؿ داخع إذا َٕقم‬
‫بتحقيِٓا إػ وشؿ خارجل ‪-display: block‬‬

‫شْستخدم ٍٕس ادثال افسابؼ فُـ أوٓ جيب إضاؾة خاصٔة ‪ class‬بَّٔة مقحدة فُؾ مـ مسّك‬
‫"آشؿ" و "اشؿ افًائِة" وذفؽ فتجْب تٖثر ادسّٔات اخلاص بًْاس آختٔار افتل يبدوا مرتبة‬
‫متاما‪ -‬وبًد اضاؾة اخلاصٔة ‪ class‬وفتُـ ؿّٔتٓا مثال ‪َٕ in-text‬قم بتىبٔؼ افتْسَٔات افتافٔة‪9‬‬
‫{ ‪form fieldset .input-text‬‬

‫‪063‬‬
 ‫;‪display: block‬‬
‫;‪width: 90px‬‬
‫}‬

‫افنُؾ ‪00-05‬‬

‫يُّْْا ترك افّْقذج هُذا حٔث ييٓر ادسّك ؾقق اخلإة أما إن أردٕا أن ييٓرا جْبا إٓ جْب يٍُل‬
‫أن ٕؤػ مٔؾ ‪ float :right‬ذم افتْسَٔات افسابَة وهُذا شٔيٓر ادسّك إػ جْب اخلإة ويُّْؽ‬
‫أن دمرب ذفؽ بٍْسؽ‪-‬‬

‫‪064‬‬
065
 ‫انمشروع انخذريبي‬
‫تهّٔؿ مقؿع مـ إفػ إػ افٔاء‬

‫‪066‬‬
067
 ‫دراشة ادؼوع افتدريبل‬ ‫‪06‬‬

‫ؿد وصِْا أخرا إػ ذروة هذا افُتاب حٔث شَْقم بٕ٘ناء مقؿع بافُامؾ مـ افٍُرة إػ افْؼ ذم‬
‫إسٕت‪ -‬وأرى فزاما ظع أن أنبٓؽ أن ظِّٔة تهّٔؿ مقؿع افُسوين هل مّٓة ؿد يتىِب منارـة ظدة‬
‫أصخاص ذووا مٓارات خمتٍِة‪ ،‬وذم بًض إحٔان ؿد تُقن ادٓارات ادىِقبة متقؾرة ظْد صخص‬
‫واحد فُـ مع هذا يبَك مـ افرضوري أن يستنر ادهّؿ أصخاصا أخرى ٓ شٔام إذا ـان ادقؿع‬
‫ادهّؿ ذات أمهٔة ؿهقى‪-‬‬

‫ادٓارة ادىِقبة أوٓ هل مٓارة تهقرية حٔث يتهقر صاحب هذه ادٓارة افنُؾ افذي يريد أن ييٓر‬
‫ظِٔف ادقؿع‪ ،‬ثؿ يَقم بتهّّٔف باشتخدام احدى برامج افتهّٔؿ ــ ؾقتقصقب ‪ Photoshop‬مثال‪-‬‬
‫يسّك صاحب هذه ادٓارة ذم افًامل ادْٓل‪ 9‬مهّؿ ؽراؾٔؽ ديزايـ‪ -‬أما ادٓارة افثاين ؾٓق مٓارة حتقيؾ‬
‫ٕتٔجة صاحب ادٓارة إوػ إػ مقؿع ظز ـتابة أوامر ‪ xhtml‬و ‪ Css‬افالزمة فذفؽ وهذا ما يًِّْا‬
‫هذا افُتاب ـٍٔٔة ؾًِف‪-‬‬

‫وأن دظْا ٕتُْر بِباس ادهّؿ‪ 9‬ؾُٔػ ٕريد أن يُقن صُؾ مقؿًْا ؟‬

‫إن مًيؿ ادقاؿع افًربٔة ذم إسٕت هل مقؿع ظامة‪ ،‬فذا أؾوؾ ٕشباب تًِّٔٔة بحتة أن ْٕن مقؿع‬
‫اخب اري بسٔط حيتقي ظذ رأس افهٍحة مع ؿائّة ظِقية ومـ ثؿ ؿائّة جإبٔة ظذ افّٔغ وأخرا‬
‫حمتقى افهٍحة افتل شتتنُؾ مـ ظدة صْاديؼ اخبارية ـام هق ذم افنُؾ ‪-0-06‬‬

‫‪068‬‬
‫افنُؾ ‪ 91-06‬اهلدف مـ اختٔار هذا افنُؾ افبسٔط هق تًِؿ أـز ظدد ممُـ مـ إصٔاء‪ ،‬ـٕ٘ناء‬
‫ؿائّة ظِقية‪ ،‬ؿائّة جإبٔة‪ ،‬وتَسٔؿ افهٍحة إػ ظدة صْاديؼ‪-‬‬

‫‪07/‬‬
 xhtml ‫افتهّٔؿ‬ 07

‫ هُٔؾ افهٍحة‬07-0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="Ar"
dir="rtl">
<head>

<title>‫<مقؿع أخبار افهباح وادساء‬/title>

<meta http-equiv="Content-Type" content="text/html;

charset=windows-1256" />
<link rel="stylesheet" media="screen" type="text/css"
title="style" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header">

<h1>‫<مقؿع أخبار افهباح وادساء‬/h1>

</div>
<div id="nav">
<ul>

<li><a href="#">‫<افهٍحة افرئٔسة‬/a></li>

<li><a href="#">‫<افسٔاشة‬/a></li>

<li><a href="#">‫<آؿتهاد‬/a></li>

<li><a href="#">‫<افتُْقفقجٔا‬/a></li>

<li><a href="#">‫<افهحة‬/a></li>

</ul>
</div>

070
 ‫>‪<div class="clear"></div‬‬
‫>"‪<div id="main‬‬

‫>‪--‬حمتقى افهٍحة—! <‬

‫>‪</div‬‬
‫>"‪<div id="sidebar‬‬

‫>‪--‬افَائّة اجلإبٔة—! <‬

‫>‪</div‬‬
‫>"‪<div id="footer‬‬

‫@>‪<p‬‬ ‫>‪</p‬مع حتٔات مقؿع أخبار افهباح وادساء‬

‫>‪</div‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫تذـر أين أخزتؽ ذم بداية هذا افُتاب أن صٍحة افقيب ما هل إٓ شِسِة مـ أوامر فٌة ‪ xhtml‬يتؿ‬
‫إضاؾتٓا حتت بًوٓا افبًض‪ ،‬فذا شْتجاهؾ افنُؾ ذم هذه ادرحِة وهنتؿ ؾَط بستٔب افًْاس ـام‬
‫أوردٕاها ذم افنُؾ افسابؼ ‪- 0-07‬‬

‫‪ -0‬أوٓ فديْا افقشؿ ‪ div‬افذي حيقي ـامؾ افهٍحة ويسّك )’‪(id= ‘wrap‬‬

‫‪ -0‬ومـ ثؿ فديْا وشؿ رأس افهٍحة افذي شّْٔاه )’‪(id= ‘header‬‬

‫‪ -i‬بداخِف ظْقان ادقؿع وهق وشؿ ظْقان مـ افدرجة إوػ ‪h1‬‬

‫‪ -1‬يع رأس افهٍحة افَائّة افًِقية ادسّك )’‪(id= ‘nav‬‬

‫‪ -i‬بداخِف ؿائّة ؽر مرتبة‪ ،‬ؿٔؿ ظْاسها هل ارتباضات متثؾ ظْاس‬

‫افَائّة افًِقية‬

‫‪ -2‬فديْا بًد افَائّة افًِقية‪ ،‬حمتقى افهٍحة ادسّك )’‪(id= ‘main‬‬

‫‪ -3‬ئِٓا افَائّة اجلإبٔة )’‪(id= ‘sidebar‬‬

‫‪ -4‬وأخرا فديْا ذيؾ افهٍحة و حيتقي ظذ مجِة واحدة ؾَط ‪-p‬‬

‫‪071‬‬
‫هبذه إوامر افبسٔىة ُٕقن ؿد إتْٓٔا مـ رأس افهٍحة وافَائّة افًِقية وذيؾ افهٍحة وهُذا يبَك‬
‫فْا ادحتقى وافَائّة اجلإبٔة وأرى أن ٕبدأ هبذا إخر فسٓقفتٓا ثؿ ْٕٓل بادحتقى‪-‬‬

‫افَائّة اجلإبٔة‪9‬‬

‫اهلدف مـ افقشؿ ‪ sidebar‬افسابؼ ذـره هق ختهٔص مساحة افَائّة اجلإبٔة ذم افّٔغ‪ ،‬أما ادحتقى‬
‫ؾٔجب أن َٕقم بتحديده ـام يع‪9‬‬

‫‪ -0‬أوٓ َٕقم بتحديد وشؿ ‪ div‬ذات افَّٔة )’‪ (id= ‘sideblock‬حيتقي داخِف ظذ‪9‬‬

‫‪ -a‬ظْقان مـ افدرجة افثإٔة متثؾ ظْقان افبِقك‬

‫‪ -b‬ؾَرة ٕص ظادي ‪p‬‬

‫‪ -c‬وأخرا ؿائّة ؽر مرؿؿ حتقي ظدة ارتباضات‪-‬‬

‫وـام هق واضح ذم افنُؾ ‪ 0,06‬افسابؼ ؾ٘ن افَائّة اجلإبٔة تتنُؾ مـ ثالث صْاديؼ حتقي افَٔؿ‬
‫ٍٕسٓا إذا َٕقم بتُرار جمّقظة هذه إوامر ثالث مرات‪-‬‬

‫‪ 07-1‬هُٔؾ ادحتقى‬

‫ـام شبؼ وبْٔا هدف افقشؿ ‪ sidebar‬ؾ٘ن هدف افقشؿ ‪ main‬هق حتديد مساحة ادحتقى‪ -‬وٕالحظ‬
‫ذم افنُؾ ‪ 0,06‬أن داخؾ افقشؿ ‪ div‬ادسّك ‪ main‬ثالث صْاديؼ بٔض متناهبة وان اختٍِت‬
‫حمتقى ـؾ واحد مْٓا ظـ حمتقى إخرى‪َٕ -‬قم إذا ب٘ضاؾة ثالث وشقم ‪ div‬حتت بًوٓام افبًض‬
‫حيِّـ ادسّك )’‪-(class= ‘content‬‬

‫‪ -0‬افقشؿ ‪ div‬إول حيتقى ظذ خزيـ بجإب بًوٓام افبًض إذا َٕقم ب٘ضاؾة أيت‪9‬‬

‫‪ْٕ -a‬ن وشّغ ‪ div‬بّسّك )’‪ (class= ‘span2‬بداخؾ ـؾ وشؿ مْٓا‬

‫‪ -i‬صقرة ‪img‬‬

‫‪ -ii‬ظْقان مـ افدرجة افثإٔة ‪ h2‬ظذ صُؾ ارتباط‬

‫‪072‬‬
‫‪ -iii‬ؾَرة ٕص يْتٓل بارتباط ‪( a‬ؿراءة ادزيد‪ )---‬مواف داخؾ وشؿ‬
‫‪span‬‬

‫‪ -1‬افقشؿ ‪ div‬افثاين حيتقي ظذ شت أخبار ثالث بجإب بًوٓام افبًض وافُؾ حتت‬
‫افثالثة إخرى فذا َٕقم بأيت‪9‬‬

‫‪ْٕ -a‬ن شتة وشقم ‪ div‬بّسّك ‪ class= »span3‬ش بداخؾ ـؾ وشؿ مْٓا‬

‫‪ -i‬ظْقان مـ افدرجة افثإٔة ‪ h2‬ظذ صُؾ ارتباط‬

‫‪ -ii‬صقرة ‪img‬‬

‫‪ -2‬وأخرا افقشؿ ‪ div‬افثافث حيتقي ظذ ظْقان وؾَرة افْص إذا ٕؤػ داخِٓا أيت‪9‬‬

‫‪ -a‬ظْقان مـ افدرجة افثإٔة ‪h2‬‬

‫‪ -b‬ؾَرة ٕص ‪p‬‬

‫ويُقن صٍرة هذا افَسؿ ـام يع‪9‬‬

‫>"‪<div class="content‬‬
‫>"‪<div class="span2‬‬
‫>‪<img src="images/exp.png" /‬‬

‫>‪</a></h2‬ظْقان اخلز>"‪<h2><a href="#‬‬

‫ٕص اخلز>‪<p‬‬

‫>‪<span‬‬

‫>‪</a‬ؿراءة ادزيد‪<a href="#">---‬‬

‫>‪</span‬‬
‫>‪</p‬‬
‫>‪</div‬‬
‫>"‪<div class="span2‬‬
‫>‪<img src="images/exp.png" /‬‬

‫>‪</a></h2‬ظْقان اخلز>"‪<h2><a href="#‬‬

‫ٕص اخلز>‪<p‬‬

‫‪073‬‬
 <span>

<a href="#">---‫<ؿراءة ادزيد‬/a>

</span>
</p>
</div>
</div>
<div class="content">
<div class="span3">

<h2><a href="#">‫<ظْقان اخلز‬/a></h2>

<img src="images/exp.png" />

</div>
<div class="span3">

<h2><a href="#">‫<ظْقان اخلز‬/a></h2>

<img src="images/exp.png" />

</div>
<div class="span3">

<h2><a href="#">‫<ظْقان اخلز‬/a></h2>

<img src="images/exp.png" />

</div>
<div class="span3">

<h2><a href="#">‫<ظْقان اخلز‬/a></h2>

<img src="images/exp.png" />

</div>
<div class="span3">

<h2><a href="#">‫<ظْقان اخلز‬/a></h2>

<img src="images/exp.png" />

</div>
<div class="span3">

<h2><a href="#">‫<ظْقان اخلز‬/a></h2>

<img src="images/exp.png" />

</div>

074
‫>‪</div‬‬
‫>"‪<div class="content‬‬

‫>‪</a></h2‬ظْقان اخلز>"‪<h2><a href="#‬‬

‫ٕص اخلز>‪<p‬‬

‫>‪</p‬‬
‫>‪</div‬‬

‫وهُذا ُٕقن ؿد إتْٓٔا مـ تهّٔؿ افهٍحة بافْسبة جلإب ‪ xhtml‬ويُقن افْتٔجة ـام يع‪9‬‬

‫‪075‬‬
076
 ‫افديُقر ‪CSS‬‬ ‫‪08‬‬

‫فسٓقفة افؼح وافٍٓؿ مًا‪ ،‬شَْقم بتْسٔؼ ادقؿع ظذ مراحؾ متاما ـام ؾًِْا ظْد ـتابة اهلُٔؾ بٌِة‬
‫‪ ، xhtml‬مما يًْل أنْا شْبدأ ب٘ضاؾة افتْسَٔات افًامة‪ٕ ،‬تبًٓا تْسَٔات رأس افهٍحة و افَائّة‬
‫افًِقية‪َٕ ،‬قم بًدها بتحديد تْسَٔات مساحة جسؿ افهٍحة دون افتًرض فِّحتقى‪ ،‬ومـ ثؿ َٕقم‬
‫بتحديد تْسَٔات مساحة افَائّة اجلإبٔة دون افتًرض دحتقاها‪ ،‬وأخرا َٕقم بتْسٔؼ ذيؾ افهٍحة‪-‬‬
‫وبًد أن ْٕتٓل مـ ـؾ هذا شًْقد فتْسٔؼ حمتقى افَائّة اجلإبٔة ومـ ثؿ تْسٔؼ حمتقى جسؿ‬
‫افهٍحة‪-‬‬

‫‪ 08-0‬افتْسَٔات افًامة‬
‫{ ‪body, html‬‬
‫;‪margin: 0‬‬
‫;‪padding: 0‬‬
‫;‪background: #a7a09a‬‬
‫;‪text-align: justify‬‬
‫;‪font-family: Arial, tahoma, sans-serif‬‬
‫}‬
‫{ ‪#wrap‬‬
‫;‪width: 90%‬‬
‫;‪margin: 0 auto‬‬
‫;‪background-color: #FFF‬‬
‫}‬

‫َٕقم بتحديد افتْسَٔات افًامة ظذ افقشؿ ‪ body‬و ‪ html‬مًا وهل إزافة احلاصٔة اخلارجٔة‬
‫وافداخِٔة جلّٔع ظْاس افهٍحة‪ -‬تٌٔر فقن اخلٍِٔة إػ ‪ -a7a09a#‬ضبط افْص مع اشتبدال اخلط‬
‫آؾسايض إػ ‪-Aril‬‬

‫‪077‬‬
‫افـ ‪ id #wrap‬حتٔط بُامؾ افهٍحة فذا ٕستخدمف فتحديد حجؿ افهٍحة (‪ %8/‬مـ احلجؿ افُامؾ‬
‫فِناصة)‪ ،‬وظز حتديد احلاصٔة اخلارجٔة أوتقماتُٔل يتؿ تقشٔط ادقؿع وأخرا ٌٕر فقن اخلٍِٔة إػ‬
‫افِقن إبٔض ‪ ،FFF#‬وٕحهؾ ظذ افْتٔجة ذم افنُؾ ‪-0,08‬‬

‫افنُؾ ‪0-08‬‬

‫‪ 08-1‬تْسٔؼ رأس افهٍحة‬

‫{ ‪#header‬‬
‫;‪background: #27282C‬‬
‫}‬
‫{ ‪#header h1‬‬
‫;‪padding: 30px 80px‬‬
‫; ‪margin : 0‬‬
‫;‪color: #FFF‬‬
‫}‬

‫‪078‬‬
‫بافْسبة فرأس افهٍحة ٍٕسف َٕقم بتٌٔر فقن اخلٍِٔة ؾحسب‪ ،‬أما بافْسبة فًْقان ادقؿع ؾْؤػ حنق‬
‫داخع بَّٔة ‪ 2/‬بُسؾ فألظذ وإشٍؾ و‪ 7/‬بُسؾ فِّٔغ وافٔسار‪ ،‬بْٔام ٕجًؾ احلاصٔة اخلارجٔة‬
‫صٍر فوامن افتهاق رأس افهٍحة بٖظذ ادتهٍح وـذفؽ افتهاؿٓا بافَائّة افًِقية‪ -‬ومـ ثؿ َٕقم‬
‫بتٌٔر فقن افًْقان إػ إبٔض‪ -‬ويرجك افًِؿ أن احلنق ادواف (‪ 2/‬بُسؾ) هق افذي حيدد ضقل‬
‫رأس افهٍحة ـام هق ذم افنُؾ ‪ ،1,08‬أما افَّٔة ‪ 7/‬بُسؾ ؾتتحُؿ بّقضع افًْقان حسب‬
‫افًرض‪-‬‬

‫افنُؾ ‪1-08‬‬

‫‪ 08-2‬تْسٔؼ افَائّة افًِقية‬

‫{ ‪#nav‬‬
‫;‪height: 40px‬‬
‫;‪background: #1f2025‬‬
‫}‬
‫{ ‪#nav ul‬‬
‫;‪margin: 0‬‬
‫;‪padding: 0‬‬
‫;‪list-style: none‬‬
‫}‬
‫{ ‪#nav li‬‬
‫;‪float: right‬‬
‫}‬
‫‪#nav li‬‬ ‫{ ‪a‬‬
‫;‪display: block‬‬
‫;‪padding: 10px 8px‬‬

‫‪08/‬‬
 ‫;‪min-width: 70px‬‬
‫;‪text-align: center‬‬
‫;‪text-decoration: none‬‬
‫;‪font-weight: bold‬‬
‫;‪color: #eaeaea‬‬
‫}‬
‫‪#nav li‬‬ ‫{ ‪a:hover‬‬
‫;‪background: #e5e4e2‬‬
‫;‪color: #000‬‬
‫}‬

‫ذم افبداية َٕقم بتحديد ضقل افَائّة (‪ 3/‬بُسؾ) ومـ ثؿ ٕؤػ فقٕا فِخٍِٔة‪ -‬وبافْسبة فَِائّة ؽر‬
‫ادرؿّة ‪َٕ ul‬قم ؾَط ب٘زافة احلاصٔة اخلارجٔة واحلنق افداخع وـذفؽ مًرف افَائّة‪ ،‬ومـ ثؿ ٕٖيت‬
‫فًِْاس ‪ li‬ؾَْقم ب٘مافتٓا ٕحق افّٔغ ـل تيٓر جإب بًوٓا افبًض‪ٖٕ -‬يت بًدها إػ آرتباضات ‪a‬‬
‫ؾْحقهلا مجًٔا مـ وشقم داخِٔة إػ وشقم خارجٔة ثؿ ٕؤػ حنق داخع (‪ 0/‬بُسؾ أظذ‪ ,‬أشٍؾ و‬
‫‪ 7‬بُسؾ يّغ‪,‬يسار) وبًدها َٕقم ب٘ضاؾة حد أدٕك فًِرض وباظتبار هذا َٕقم بتقشٔط افْص‪ -‬ثؿ‬
‫َٕقم ب٘زافة افتسىر آؾسايض فالرتباط وٕجًؾ افْص ؽاموا ـام وٕؤػ فقٕا مْاشبا‪ ،‬وأخرا‬
‫ٕستبدل فقن اخلٍِٔة وـذا فقن افْص ظْدما يُقن ادٗذ ؾقؿٓا إلظىائٓا مجآ‪ -‬وٕحهؾ ظذ افْتٔجة‬
‫ذم افنُؾ ‪-2,08‬‬

‫افنُؾ ‪2-08‬‬

‫‪ 08-3‬تْسٔؼ ادحتقى‬
‫{ ‪#main‬‬
‫;‪display: inline-block‬‬

‫‪080‬‬
 ‫;‪width: 76%‬‬
‫;‪padding: 1%‬‬
‫;‪text-align: center‬‬
‫;‪background-color: #F1F2F2‬‬
‫}‬

‫فَد تًِّْا حتك أن أن اخلاصٔة ‪ display‬هلا ؿّٔتان إوػ ‪ block‬فتحقيؾ وشؿ داخع إػ‬
‫خارجل وافثإٔة ‪ inline‬فتحقيؾ وشؿ خارجل إػ داخع أما افَّٔة ادذـقرة هْا (‪)inline-block‬‬
‫ؾِؿ يسبؼ احلديث ظْٓا وافسبب هق أن هذه ؿّٔة جديدة خاصة بافْسخة افثافثة هلذه افٌِة ‪css 3‬‬
‫ويستخدم هذه افَّٔة إلطٓار أي ظْك ـهْدوق فُـ دون افًقدة إػ افسىر‪ -‬بًّْك آخر يستخدم‬
‫إلطٓار صْدوؿغ جإب بًوٓام افبًض وهبذا ينبف خاصٔة آمافة ‪ float‬افتل ـْا ٕستخدمٓا حتك‬
‫أن إلمافة افًْاس ـل ٕتُّـ مـ اطٓار صْدوؿغ ذم شىر واحد‪-‬‬

‫بًد حتديد حجؿ مساحة حمتقى افهْدوق بـ ‪ٕ %65‬ؤػ حاصٔة ‪ %0‬دْع تالصؼ ادحتقى بافًْاس‬
‫إخرى ثؿ َٕقم بتقشٔط افْص ٓ هلدف تقشٔط افْص ٍٕسٓا فُـ فتقشٔط افهْاديؼ افتل يتُقن‬
‫مْٓا حمتقى افهٍحة حٔث أن اخلاصٔة ‪ text-align‬تَقم بتقشٔط مجٔع ما بداخؾ افقشؿ افذي تؿ‬
‫افتىبٔؼ ظِٔف شقاء ٕص أو ظْاس أخرى‪-‬‬

‫وأخرا َٕقم بتحديد فقن اخلٍِٔة‪ ،‬وافتل هلا أثر ـبر ذم تهّٔؿ افهٍحة حٔث أنف يّثؾ فقن افَسؿ‬
‫إجّـ بْٔام فقن افَائّة اجلإبٔة شُٔقن هل افِقن ادواف ظذ افقشؿ ادحٔط بُامؾ افهٍحة أي‬
‫‪ -wrap#‬وهْا أجدين موىرا أن أذح فؽ مًْك هذا افَقل مستًْٔا بافنُؾ افتايل‪9‬‬

‫افنُؾ ‪3-08‬‬

‫‪081‬‬
‫تتُقن هذه إصُال افثالثة مـ رأس افهٍحة وجسّٓا ذم افّٔغ وؿائّة جإبٔة ذم افٔسار‪ ،‬فُـ‬
‫خيتِػ ـٍٔٔة تهّٔؿ افنُؾ إول ظـ تهّٔؿ افنُِغ افثاين وافثافث أما هذيـ إخريـ ؾال‬
‫خيتٍِان ذم ـٍٔٔة تهّّٔٓام فُـ ؿد ييٓران خمتٍِغ حسب حمتقى اجلسؿ وافَائّة اجلإبٔة‪-‬‬

‫فتهّٔؿ افنُؾ إول شْحتاج إػ ثالثة وشقم ‪ div‬واحد فرأس افهٍحة وأخر جلسّٓا وأخرا‬
‫واحد فَِائّة اجلإبٔة ـام يع‪9‬‬
‫>‪<div id="header"></div‬‬
‫>‪<div id="main"></div‬‬
‫>‪<div id="sidebar"></div‬‬

‫بًد تْسٔؼ هذه إوامر ظـ ضريؼ فٌة ‪ css‬يُّْْا افقصقل إػ افنُؾ رؿؿ ‪ 0‬حٔث شٔتقؿػ فقن‬
‫خٍِٔة افَائّة اجلإبٔة باظتبار حمتقاها وهُذا إذا ـان حمتقى افـ ‪ main‬أـز مـ حمتقى افَائّة اجلإبٔة‬
‫شْحهؾ ظذ ٕتٔجة افنُؾ رؿؿ‪-0‬‬

‫وأن بافْسبة فِنُِغ رؿؿ ‪ 1‬و ‪ 2‬شْحتاج إػ أربًة وشقم ‪ div‬واحد فِرأس وثان حئط باجلسؿ‬
‫وافَائّة اجلإبٔة مًا ويُقن بداخِٓا وشؿ فِّحتقى ووشؿ فَِائّة ـام يع‪9‬‬
‫>‪<div id="header"></div‬‬
‫>"‪<div id="wrap‬‬
‫>‪<div id="main"></div‬‬
‫>‪<div id="sidebar"></div‬‬
‫>‪</div‬‬

‫باشتخدام هذا افتهّٔؿ َٕقم ب٘ضاؾة فقن خٍِٔة افَائّة اجلإبٔة ظذ افقشؿ ادحٔط بادحتقى‬
‫وافَائّة مًا (أي ‪ )wrap‬ومـ ثؿ ٕحدد فقن خٍِٔة وشؿ ادحتقى (‪ )main‬أما وشؿ افَائّة‬
‫(‪ )sidebar‬ؾال ٕؤػ فف أي خٍِٔة أو ُٕرر ٍٕس اخلٍِٔة ادواف ظذ افقشؿ ‪ -wrap‬وهُذا‬
‫ٕحهؾ ظذ افنُؾ رؿؿ ‪ 2‬حٔث يُقن ضقل افَائّة اجلإبٔة ظذ ؿدر ضقل ادحتقى وهذا هق‬
‫ادىِقب أما ذم حال ـقن حمتقى افَائّة اجلإبٔة أـز مـ ادحتقى ٍٕسٓا ؾْحهؾ ظذ افنُؾ ‪ 1‬وهذا‬
‫هق ظٔب هذه افىريَة فُـ بام أن افٌافب هق أن يُقن ادحتقى أضقل مـ افَائّة ٓ بٖس إذا مـ‬
‫اشتخدام هذه افىريَة‪ -‬وهذا هق افىريَة ادستخدمة ذم هذا افتهّٔؿ‪-‬‬

‫‪082‬‬
 ‫‪ 08-4‬تْسٔؼ افَائّة اجلإبٔة‬
‫{ ‪#sidebar‬‬
‫;‪display: inline-block‬‬
‫;‪vertical-align: top‬‬
‫;‪width: 21%‬‬
‫}‬

‫بام أنْا ٕريد أن ييٓر افَائّة اجلإبٔة إػ جإب ؿسؿ ادحتقى ؾٕ٘ف ٓ بد أن ٕؤػ فف أجوا اخلاصٔة‬
‫‪ display‬مع ٍٕس افَّٔة ‪ inline-block‬فُـ ؿبؾ أن ينُؾ ظِٔؽ إمر ٓبد أن أبغ فؽ أنْا ؿِْا‬
‫أن اشتخدام اخلاصٔة ‪ display‬مع افَّٔة ‪ inline-block‬تنبف ذم ظِّٓا اخلاصٔة ‪ float‬افتل‬
‫ٕستخدمٓا إلطٓار صْدوؿغ إػ جإب بًوٓام افبًض ظـ ضريؼ حتديد جٓة طٓقر افهْدوق إول‬
‫إذا ماـْت افّٔغ (‪ )right‬أو افٔسار (‪ )left‬وـذا مع افهْدوق افثاين‪ -‬إذا ظْدما َٕقم باشتخدام‬
‫افَّٔة ‪ inline-block‬ؾُٔػ يتؿ حتديد جٓة طٓقر افهْدوق ؟ اجلقاب شٓؾ جدا؛ حيدد ذفؽ‬
‫جٓة افهٍحة‪ ،‬حٔث ييٓر افقشؿ إول ذم اجلٓة افتل تبدأ مْٓا افهٍحة وافقشؿ افثاين ييٓر ذم اجلٓة‬
‫افتل تْتٓل إفٔٓا افهٍحة‪ -‬و بام أن صٍحتْا تبدأ مـ افّٔغ إػ افٔسار‪ ،‬ؾافقشؿ إول ذات آشؿ‬
‫‪ #main‬شٔيٓر ذم افّٔغ بْٔام افقشؿ افثاين ‪ #sidebar‬شٔيٓر ذم افٔسار مما يًْل أنْا فق أردٕا أن‬
‫ييٓرا بافًُس أي أن ييٓر ‪ #main‬ذم افٔسار و ‪ #sidebar‬ذم افّٔغ ؾْوىر إػ تًديؾ مِػ‬
‫‪ xhtml‬إلضاؾة إوامر اخلاص بافـ ‪ #sidebar‬ؿبؾ أوامر افـ ‪-#main‬‬

‫وأن فًْد أدراجْا‪ ،‬وٕالحظ أجوا اخلاصٔة ‪ vertical-align‬افتل مل ٕستخدمٓا حتك أن إػ مع‬
‫اجلداول فِتحُؿ بّقضع حمتقى اخلاليا أؾَٔا‪ -‬إن هذه اخلاصٔة تًّؾ هْا بٍْس هذا إشِقب حٔث‬
‫أنْا ظْدما ٕيٓر صْدوؿغ أمام بًوٓام افبًض باشتخدام ‪ inline-block‬ؾٕ٘ف ظْدما يُقن حمتك‬
‫احدى افهْدوؿغ أؿؾ مـ إخرى يتؿ اطٓار افهْدوق ذات ادحتقى إؿؾ ظذ افسىر متاما ـام فق‬
‫أهنا خِٔة جدول فذا يُّْْا اشتخدام ‪ vertical-align‬مع افَّٔة ‪ top‬إلطٓارها ذم إظذ وهُذا‬
‫ٕحهؾ ظذ ٕتٔجة منابف فـ ‪ float‬فُـ أحسـ مْٓا‪-‬‬

‫ذم افْٓاية وـل يتؿ طٓقر افَائّة اجلإبٔة ظذ يّغ ادحتقى ؾال بد أن ٕحدد فف احلجؿ ادْاشب وهْا‬
‫‪ %10‬بام أن ؿسؿ ادحتقى أخذت ‪ %65‬و افـ ‪ %2‬افباؿٔة فِحقار‪-‬‬

‫‪083‬‬
 ‫افنُؾ ‪4-08‬‬

‫‪ 08-5‬تْسٔؼ حمتقى افَائّة‬

‫{ ‪#sidebar .sideblock‬‬
‫;‪background-color: #FFF‬‬
‫;)‪border: 1px solid rgb(236, 236, 236‬‬
‫;‪margin-top: 10px‬‬
‫}‬
‫{ ‪#sidebar .sideblock h2‬‬
‫;)‪background-color: rgb(241, 242, 242‬‬
‫;‪margin: 0‬‬
‫;‪padding: 5px‬‬
‫}‬

‫أول ما َٕقم بف هق تْسٔؼ بِقك افَائّة ظـ ضريؼ حتديد فقن اخلٍِٔة‪ ،‬ثؿ إضاؾة حدود فِهْدوق مع‬
‫إضاؾة حاصٔة خارجل فسك مساؾة ‪ 0/‬بُسؾ بغ افبِقـات‪َٕ -‬قم بًدها بتْسٔؼ وشؿ افًْقان ‪h2‬‬
‫افذي ي ًتز ـًْقان فِبِقك حٔث ٕؤػ فف فقن خٍِٔة وٕزيؾ احلاصٔة اخلارجٔة ـل تِتهؼ بافبِقك‬
‫وتنُؾ مًف بِقك واحد وأخرا ٕؤػ حنق داخع إلبًاد افًْقان ظـ حدود افهْدوق أما باؿل‬
‫افًْاس (افٍَرة وآرتباضات ٕسـٓا ظذ تْسَٔٓا آؾسايض) وهُذا ٕحهؾ ظذ افْتٔجة افتافٔة‪-‬‬

‫‪084‬‬
 ‫افنُؾ ‪5-08‬‬

‫‪ 08-6‬تْسٔؼ ذيؾ افهٍحة‬

‫{ ‪#footer‬‬
‫;‪padding: 15px‬‬
‫;‪background: #cc9‬‬
‫}‬
‫{ ‪#footer p‬‬
‫;‪margin: 0‬‬
‫}‬

‫ؿد جرى افًادة ظذ إضاؾة بًض ادًِقمات ذم ذيؾ افهٍحة‪ ،‬فُـ شُْتٍل هْا ب٘ضاؾة ظبارة واحدة‬
‫ؾَط‪ ،‬هلذا ترى أن تْسٔؼ افذيؾ بسٔط جدا؛ وهق ظبارة ظـ حنق داخع مع خٍِٔة فقن ومـ ثؿ إزافة‬
‫احلاصٔة اخلارجٔة اخلاصة بافٍَرة ‪-p‬‬

‫‪ 08-7‬تْسٔؼ حمتقى افهٍحة‬

‫بًد أن إتْٓٔا أن مـ تْسٔؼ افهٍحة بنُؾ ظام ًٕقد أن فتْسٔؼ حمتقى افهٍحة‪ ،‬وشَْقم ذم‬
‫افبداية بتْسٔؼ افقشؿ ادسّك ‪ content‬وافذي يًّؾ ـخٍِٔة أويل فبِقك ادًِقمات ـام شبؼ ورأجْا‬
‫ذفؽ ذم افنُؾ ‪-0,06‬‬
‫{ ‪#main .content‬‬
‫;‪width: 100%‬‬
‫;‪margin-bottom: 15px‬‬

‫‪085‬‬
 ‫;‪background: #FFF‬‬
‫;)‪border: 1px solid rgb(230, 230, 230‬‬
‫;‪padding: 10px 0‬‬
‫}‬

‫َٕقم أوٓ بتحديد احلجؿ ‪ %0//‬ثؿ ٕحدد فقن اخلٍِٔة افذي يًد افسبب افرئٔز ٓشتخدامْا هلذا‬
‫افقشؿ‪َٕ ،‬قم بًدها ب٘ضاؾة حاصٔة خارجٔة ذم إشٍؾ مـ أجؾ افٍهؾ بغ افبِقـات‪ ،‬ومـ ثؿ‬
‫ٕؤػ هلا حدود بَّٔة ‪ 0‬بُسؾ وٕختؿ هذه افتْسَٔات ب٘ضاؾة مساحة حنق داخع بَّٔة ‪ 0/‬بُسؾ‬
‫فألظذ وإشٍؾ وصٍر فِجٓات إخرى‪-‬‬

‫تْسٔؼ افبِقك ‪ span2‬و ‪9span3‬‬

‫{ ‪#main .span2‬‬
‫;‪width: 48.4%‬‬
‫}‬
‫{ ‪#main .span3‬‬
‫;‪width: 32%‬‬
‫}‬
‫{ ‪#main .span2, .span3‬‬
‫;‪display: inline-block‬‬
‫;)‪background-color: rgb(241, 242, 242‬‬
‫;)‪border: 1px solid rgb(230, 230, 230‬‬
‫;‪margin: 0.1%‬‬
‫;‪vertical-align: top‬‬
‫}‬

‫ٕستخدم افبِقك ادسّك ‪ span2-‬فًرض بِقـتغ جإب بًوٓا افبًض‪ ،‬فذا َٕقم بتحديد حجّٓام‬
‫‪ %37.3‬وبام أنْا ٕستخدم وشّغ مباذة ذم مِػ ‪ xhtml‬ؾستَقم هذيـ افقشّغ بتَسٔؿ ادساحة‬
‫ادتقؾرة بْٔٓام ـؾ بِقك حيهؾ ظذ ‪ %37.3‬ؾتُقن جمّقع آثْغ ‪ %85.7‬أما افـ ‪ 2.1‬افباؿل ؾْسـف‬
‫فِحاصٔة اخلارجٔة وهل ‪ %/.0‬فُؾ اجلقإب‪ -‬وإذا إتَِْا أن إػ افبِقك ادسّك ‪span3-‬‬
‫ؾْستخدمف فًرض شت بِقـات‪ ،‬ثالث جإب بًوٓا افبًض وثالثة أخرى أشٍِٓا‪ ،‬فذا ٕحدد‬
‫احلجؿ ‪ %21‬ؾتٖخذ افبِقـات افثالثة إوػ ما جمّقظف ‪ %8/‬ؾتوىر افثالثة إخرى إػ افيٓقر‬
‫أشٍِٓا‪-‬‬

‫‪086‬‬
‫بًد أن ؿّْا بتحديد إحجام َٕقم أخرا بتحقيؾ افبِقـات إػ ‪ inline-block‬وهبذا ييٓرن جإب‬
‫بًوٓا افبًض‪ -‬وأخرا هْاك اخلاصٔة ‪ vertical-align‬افتل اشتخدمْاها فًرض افبِقك ذم إظذ‬
‫فٍْس افسبب افذي ذحْاه أثْاء اشتخدامْا هلذه اخلاصٔة ٕول مرة ظْد تْسٔؼ افَائّة اجلإبٔة‪-‬‬

‫افتْسَٔات إخرة‪9‬‬
‫{ ‪#main .span2 img‬‬
‫;‪width: 150px‬‬
‫;‪height: 130px‬‬
‫;‪float: right‬‬
‫;‪padding-left: 5px‬‬
‫}‬
‫{ ‪#main .span3 img‬‬
‫;‪width: 100%‬‬
‫;‪height: 130px‬‬
‫}‬
‫{ ‪#main .span2 h2, .span3 h2‬‬
‫;‪margin: 2px 0‬‬
‫}‬
‫{ ‪#main .span2 p‬‬
‫;‪margin: 0‬‬
‫;‪text-align: justify‬‬
‫}‬

‫َٕقم بتْسٔؼ افهقر داخؾ افبِقـات حٔث ٕجًؾ ضقل افهقر ذم مجٔع افبِقـات ‪ 02/‬بُسؾ بْٔام‬
‫بافْسبة فًِرض ٕجًؾ ظرض افهقر داخؾ افبِقك ‪ span2 150‬بُسؾ وذم داخؾ افبِقك ‪span3‬‬
‫ٕجًِٓا ‪ %0//‬ومـ ثؿ ّٕٔؾ افهقر داخؾ ‪ span2‬مع اضاؾة حنق ذم افٔسار دْع افتهاق افْص‬
‫بافهقر وأخرا ٕؤػ حاصٔة ‪ 1‬بُسؾ فًْاويـ ـال افبِقـغ بْٔام ٕزيؾ حاصٔة افْص ذم افبِقك‬
‫‪ span2‬ـام َٕقم بوبط افْص‪-‬‬

‫ذم افْٓاية يُقن تْسَٔات افهٍحة ـامِة ـام يع‪9‬‬

‫{ ‪body, html‬‬
‫;‪margin: 0‬‬
‫;‪padding: 0‬‬

‫‪087‬‬
 background-color: #a7a09a;
text-align: justify;
font-family: Arial, tahoma, sans-serif;
}
#wrap {
width: 90%;
margin: 0 auto;
background-color: #FFF;
}
#header {
background: #27282C;
}
#header h1 {
padding: 30px 80px;
margin: 0;
color: #FFF;
}
#nav {
height: 40px;
background: #1f2025;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
float: right;
}
#nav li a {
display: block;
padding: 10px 8px;
min-width: 70px;
text-align: center;
text-decoration: none;

088
 font-weight: bold;
color: #eaeaea;
}
#nav li a:hover {
background: #e5e4e2;
color: #000;
}
#main {
display: inline-block;
width: 76%;
padding: 1%;
text-align: center;
background-color: #F1F2F2;
}
#main .content {
width: 100%;
margin-bottom: 15px;
background: #FFF;
border: 1px solid rgb(230, 230, 230);
padding: 10px 0;
}
#main .span2 {
width: 48.4%;
}
#main .span3 {
width: 32%;
}
#main .span2, .span3 {
display: inline-block;
background-color: rgb(241, 242, 242);
border: 1px solid rgb(230, 230, 230);
margin: 0.1%;
vertical-align: top;
}
#main .span2 img {

1//
 width: 150px;
height: 130px;
float: right;
padding-left: 5px;
}
#main .span3 img {
width: 100%;
height: 130px;
}
#main .span2 h2, .span3 h2 {
margin: 2px 0;
}
#main .span2 p {
margin: 0;
text-align: justify;
}
#sidebar {
display: inline-block;
vertical-align: top;
width: 21%;
}
#sidebar .sideblock {
background-color: #FFF;
border: 1px solid rgb(236, 236, 236);
margin-top: 10px;
}
#sidebar .sideblock h2 {
background-color: rgb(241, 242, 242);
margin: 0;
padding: 5px;
}
#footer {
padding: 15px;
background: #cc9;
}

1/0
‫{ ‪#footer p‬‬
‫;‪margin: 0‬‬
‫}‬

‫‪ 08-8‬تقاؾؼ ادقؿع مع متهٍحات افقيب‬

‫يُقن ٕتٔجة ادقؿع ـام ذم افنُؾ افتايل (‪ )6,08‬ذم ـؾ مـ متهٍح ؾرؾُس‪ ،‬جقجؾ ـروم‪ ،‬أوبرا‬
‫وـذفؽ ذم افْسخة ‪ 8‬دتهٍح إسٕت اـسبِقرر أما ذم افْسخات ‪ 5‬و‪ 6‬ؾتيٓر افْتٔجة خمتٍِة جدا ـام‬
‫ذم افنُؾ (‪-)7,08‬‬

‫افنُؾ ‪ 96-08‬افنُؾ افْٓائل فِّقؿع ـام ييٓر ذم مًيؿ ادتهٍحات‬

‫‪1/1‬‬
 ‫افنُؾ ‪ٕ 97-08‬تٔجة ادقؿع ذم متهٍح إسٕت اـسبِقرر ‪6‬‬

‫إن طٓقر ادقؿع هبذا افنُؾ ذم افْسخات إؿؾ مـ افتسًة ذم متهٍح إسٕت اـسبِقرر يًقد إػ‬
‫افتٖخر ادًتاد فدى مُٔروشقؾت ذم دظؿ متهٍحتف ٔخر تَْٔات فٌة ‪ -CSS‬وذم هذه ادنُِة‬
‫بافذات يًقد إػ شقء تًامؾ ادتهٍحات ما ؿبؾ افْسخة ‪ 8‬مع افَّٔة ‪ inline-block‬اخلاص‬
‫باخلاصٔة ‪ display‬حٔث أنف ٓ يًّؾ إٓ مع افقشقم افداخع أي تِؽ افتل يُقن ؿّٔة طٓقرها‬
‫آؾسايض ‪-inline‬‬

‫حلؾ هذه ادنُِة َٕقم بتحقيؾ مجٔع افقشقم افتل حددٕا ؿّٔة طٓقرها ‪ inline-block‬إػ ‪inline‬‬
‫ؿبؾ أن َٕقم مرة أخرى بتحقيِٓا إػ ‪ -inline-block‬وخالصة افٍُرة هل أنْا َْٕع ادتهٍح أن‬
‫هذه افقشقم هل وشقم داخِٔة (‪ )inline‬بنُؾ اؾسايض مما يسّح هلا بَبقل افَّٔة ‪inline-‬‬
‫‪-block‬‬

‫‪1/2‬‬
‫ـل ٕستىٔع اؿْاع ادتهٍح ؾْٕ٘ا َٕقم بٕ٘ناء مِػ اشتايؾ جديدة ثؿ ًّٕد إػ افقشقم افتل حددٕا هلا‬
‫ؿٔؿ ‪ inline-block‬ذم آشتايؾ إصع ؾْحدد هلا ؿّٔة ‪ inline‬وفوامن احلهقل ظذ احلجؿ‬
‫افًٍع فِقشقم ٕحدد ؿّٔة افزوم ‪1-)zoom( 0‬‬

‫وأخرا َٕقم باشتدظاء هذا آشتايؾ اجلديد ذم مِػ ‪ xhtml‬ظـ ضريؼ افتًَِٔات ادؼوضة؛ وهق‬
‫تًِٔؼ ٕوع بداخِف أوامر يتؿ تىبَٔٓا إذا حتََت ذط ما‪ ،‬ـام يع‪9‬‬
‫>]‪<!--[if lte IE 7‬‬
‫>‪<link rel="stylesheet" href="style_ie.css" /‬‬
‫>‪<![endif]--‬‬

‫يًْل هذا افتًِٔؼ ادؼوط أن ادتهٍح شَٔقم باشتدظاء مِػ آشتايؾ ادسّك ‪style_ie.css‬‬
‫ؾَط ظْدما يُقن ادتهٍح هق ‪ IE 7‬أي ‪( internet explorer 7‬إسٕت اـسبِقرر ‪-)6‬‬

‫أما حمتقى مِػ آشتايؾ ؾٓق ـام يع‪9‬‬

‫{‪#main, #sidebar, #main .span2, #main .span3‬‬
‫;‪display: inline‬‬
‫;‪zoom: 1‬‬
‫}‬

‫ـام تًِؿ هْاك سمس وشقم أو بإحرى مسّٔات وشقم هل افتل تؿ تىبٔؼ ؿّٔة ‪inline-block‬‬
‫ظِٔٓا و هل ؿسؿ ادحتقى و افَائّة اجلإبٔة (‪ #main‬و ‪ )#sidebar‬ووشؿ ظرض اخلزيـ جإب‬
‫بًوٓام افبًض (‪ ).span2‬وأخرا وشؿ ظرض افثالثة أخبار جإب بًوٓا افبًض (‪-).span3‬‬

‫بًد تىبٔؼ هذه افتْسَٔات واشتدظاء ادِػ إػ داخؾ ‪ index.html‬ؾسٔيٓر ادقؿع متاما ـام ييٓر‬
‫فدى ادتهٍحات إخرى وُٕقن هبذا حِْٔا منُِة ظدم تقاؾؼ ادقؿع مع ادتهٍحات افَديّة‬
‫اخلاصة باميُروشقؾت‪-‬‬

‫‪ 1‬افـ ‪ zoom‬هل خاصٔة ‪ CSS‬حتدد حجؿ افبِقك ؾًْدما يُقن ؿّٔة افـ ‪ zoom‬يساوي ‪ٕ 0‬حهؾ ظذ‬
‫احلجؿ افًٍع فِبِقك وظْدما يُقن ‪ٕ /.4‬حهؾ ظذ بِقك ذات حجؿ أؿؾ مـ احلجؿ إصع بَّدار‬
‫‪-%4/‬‬

‫‪1/3‬‬
 ‫انفهرس‬
‫‪ 1‬حًهيذ‪3 ..............................................................................‬‬
‫‪ 1.1‬يىالغ االَخرَج وكيفيت ػًههب‪3 ................................................‬‬
‫‪ 1.1‬نغبث حظًيى انًىالغ ‪5 ...........................................................‬‬
‫‪ 1.3‬األدواث انالزيت‪8 ..................................................................‬‬
‫‪ 0.2.0‬مخظفح ويب ‪8 .....................................................................‬‬
‫‪ 0.2.3‬محرر وظىص ‪00 ................................................................‬‬
‫‪ 2‬طفحخك األونً ‪11 ................................................................‬‬
‫‪ 1.1‬انؼُبطر وانىسىو ‪11 ............................................................‬‬
‫‪ 1.1‬انخظبئض ‪11 .....................................................................‬‬
‫‪ 1.3‬انظيغت انًؼيبريت نظفحت ‪18 ........................................... html‬‬
‫‪ 2.4‬انخؼهيمبث وانًالحظبث ‪11 ........................................................‬‬
‫‪ 3‬يؼبندت انُظىص‪13 .............................................................‬‬
‫‪ 3.1‬انؼُبويٍ ‪13 ........................................................................‬‬
‫‪ 3.1‬انفمراث ‪12 .........................................................................‬‬
‫‪ 2.3.0‬حىسيق انىظىص ‪38 ..............................................................‬‬
‫‪ 2.3.3‬االقخباساث واالخخظاراث ‪21 ...................................................‬‬
‫‪ 3.3‬انمىائى خهت ‪31 .......................................................... xhtml‬‬
‫‪ 2.2.0‬قائمت غير مىظمت ‪22 ..............................................................‬‬
‫‪ 2.2.3‬قائمت مرقمت ‪23 ....................................................................‬‬
‫‪ 2.2.2‬قائمت حؼريفيت ‪23 ...................................................................‬‬
‫‪ 4‬انظىر ‪31 ..........................................................................‬‬
‫‪ 2.1‬أَىاع انظىر وفرولبحهب ‪31 ....................................................‬‬
‫‪ 2.1‬إضبفت طىرة‪38 ..................................................................‬‬
‫‪ 5‬انروابظ انخشؼيبيت ‪25 ............................................................‬‬
‫‪ 5.1‬انروابظ انخبرخيت (إنً يىلغ آخر) ‪25 .......................................‬‬

‫‪1/4‬‬
‫‪ 5.1‬انروابظ انذاخهيت ‪21 ..............................................................‬‬
‫‪ 5.3‬رابظ ارسبل رسبنت ‪28 ...........................................................‬‬
‫‪ 5.2‬رابظ إنً يىضغ يحذد ‪28 ......................................................‬‬
‫‪ 1‬يفهىو طفحبث األًَبط‪53 ......................................................‬‬
‫‪ 1‬طرق حضًيٍ يهف ‪ CSS‬داخم يهف ‪52 ............................... html‬‬
‫‪ 1.1‬حضًيٍ يببشر داخم انىسى ‪52 ................................................‬‬
‫‪ 1.1‬حضًيٍ يببشر ػٍ طريك رأش انظفحت ‪52 ................................‬‬
‫‪ 1.3‬حضًيٍ بىاسطت يهف يسخمم ‪55 ..............................................‬‬
‫‪ 8‬إضبفت حُسيك ‪ CSS‬نىسى ‪55 ..........................................xhtml‬‬
‫‪ 8.1‬إضبفت حُسيك يىحذ ألكثر يٍ وسى ‪11 .......................................‬‬
‫‪ 8.2‬انخبطيخبٌ ‪ id‬و ‪13 ....................................................... class‬‬
‫‪ 5‬يفهىو انخدًيغ وانخخظيض‪15 ................................................‬‬
‫‪ 10‬حُسيك انُظىص‪18 ............................................................‬‬
‫‪ 1..1‬حدى وَىع انخظ‪18 ............................................................‬‬
‫‪ 1..1‬انًحبراة واالزاحت ‪12 ..........................................................‬‬
‫‪ 01.3.0‬انمحاراة ‪47 ........................................................................‬‬
‫‪ 01.3.3‬االزاحت ‪47 ........................................................................‬‬
‫‪ 1..3‬انطراز وانسخرفت ‪11 ...........................................................‬‬
‫‪ 10.4‬حُسيك انمىائى خهت ‪15 .................................................. CSS‬‬
‫‪ 01.7.0‬إزانت إزاحت انقائمت‪47 ...........................................................‬‬
‫‪ 01.7.3‬حغيير انمؼرف االفخراضي ‪80 .................................................‬‬
‫‪ 01.7.2‬حمثيم انمؼرف بظىرة ‪87 ......................................................‬‬
‫‪ 11‬األنىاٌ وطرق إضبفخهب‪81 ....................................................‬‬
‫‪ 11.1‬طريمت انخسًيت االسًيت ‪81 ...................................................‬‬
‫‪ 11.1‬طريمت انخسًيت انسذاسيت ‪88 .................................................‬‬
‫‪ 11.3‬طريمت ‪85 .................................................................. rgb‬‬
‫‪ 11‬انخهفيت‪51 ........................................................................‬‬

‫‪1/5‬‬
‫‪ 11.1‬نىٌ انخهفيت ‪51 .................................................................‬‬
‫‪ 11.1‬اسخخذاو طىرة كخهفيت‪53 ....................................................‬‬
‫إضافت طىرة خهفيت ‪72 .........................................................‬‬ ‫‪03.3.0‬‬
‫حثبيج انخهفيت مه ػذمه ‪73 .....................................................‬‬ ‫‪03.3.3‬‬
‫حكرار انخهفيت مه ػذمه ‪73 ....................................................‬‬ ‫‪03.3.2‬‬
‫مىضغ انخهفيت ‪77 ...............................................................‬‬ ‫‪03.3.7‬‬
‫اخخظار خظائض انخهفيت ‪78 .................................................‬‬ ‫‪03.3.3‬‬
‫‪ 13‬حُسيك انروابظ انخشؼيبيت ‪55 .................................................‬‬
‫‪ 13.1‬انفئبث انًسيفبث ‪55 ............................................................‬‬
‫‪ 13.1‬حُسيك انروابظ ‪55 ..............................................................‬‬
‫انخىسيق األوني نهرابط ‪77 ......................................................‬‬ ‫‪02.3.0‬‬
‫ػىذ مرور انمؤشر ‪010 ........................................................‬‬ ‫‪02.3.3‬‬
‫ػىذ وقر انرابط ‪010 .............................................................‬‬ ‫‪02.3.2‬‬
‫بؼذ زيارة االرحباط ‪013 ........................................................‬‬ ‫‪02.3.7‬‬
‫‪ًَ 12‬ىرج انظُذوق ‪1.5 .........................................................‬‬
‫‪ 12.1‬حدى انظُذوق ‪1.1 ............................................................‬‬
‫‪ 12.1‬حذود انظُذوق ‪11. ...........................................................‬‬
‫انحجم ‪001 ........................................................................‬‬ ‫‪07.3.0‬‬
‫انىىع ‪000 ........................................................................‬‬ ‫‪07.3.3‬‬
‫انهىن ‪007 .........................................................................‬‬ ‫‪07.3.2‬‬
‫اخخظار أوامر حىسيق انحذود ‪007 ...........................................‬‬ ‫‪07.3.7‬‬
‫‪ 12.3‬انحشى وانحبشيت ‪111 .........................................................‬‬
‫‪ 12.2‬حىسيظ انظُذوق ‪111 .........................................................‬‬
‫‪ 14.5‬إيبنت انؼُبطر ‪112 ..............................................................‬‬
‫‪ 07.3.0‬ححىيم ػىظر مه وىع داخهي إنى خارجي وانؼكس ‪037 ................‬‬
‫‪ 07.3.3‬حطبيق إمانت ػهى ػىظر ‪037 .................................................‬‬
‫‪ 07.3.2‬إيقاف االمانت ‪037 ...............................................................‬‬
‫‪ 12.1‬ححذيذ يىضغ ػُظر ‪115 .....................................................‬‬
‫‪ 07.7.0‬مىضغ مطهق ‪022 ..............................................................‬‬
‫‪ 07.7.3‬مىضغ ثابج ‪023 ................................................................‬‬
‫‪ 07.7.2‬مىضغ وسبي ‪023 ...............................................................‬‬
‫‪ 15‬اندذاول ‪131 .....................................................................‬‬

‫‪1/6‬‬
‫‪ 15.1‬حًهيذ ‪131 .......................................................................‬‬
‫‪ 15.1‬ػُىاٌ اندذول ‪12. ............................................................‬‬
‫‪ 15.3‬اندذاول انؼبديت ‪121 ...........................................................‬‬
‫‪ 15.2‬اندذاول انًخطىرة ‪125 ........................................................‬‬
‫‪ 15.5‬حمسيى اندذول إنً فئبث ‪125 .................................................‬‬
‫‪ 15.1‬ديح انخاليب ‪121 ................................................................‬‬
‫‪ 15.7‬حُسيك اندذاول يغ ‪151 ................................................ CSS‬‬
‫‪ 03.4.0‬بؼض انخىسيقاث انخي سبق رؤيخها ‪033 ......................................‬‬
‫‪ 03.4.3‬ثالثت حىسيقاث خاطت بانجذاول ‪032 ..........................................‬‬
‫‪ 11‬انًُبرج ‪155 .....................................................................‬‬
‫‪ 11.1‬حؼريف ًَىرج ‪155 ............................................................‬‬
‫‪ 16.2‬انًُبرج انُظيت ‪151 ............................................................‬‬
‫‪ 07.3.0‬ػىظر وظي مه سطر واحذ ‪037 ............................................‬‬
‫‪ 07.3.3‬ومىرج كهمت انسر ‪037 ..........................................................‬‬
‫‪ 07.3.2‬ومىرج وظي مخؼذد األسطر ‪037 ..............................................‬‬
‫‪ًَ 11.3‬برج انخيبراث‪111 ...........................................................‬‬
‫‪ 07.2.0‬ومىرج انخيار انمفرد ‪073 ......................................................‬‬
‫‪ 07.2.3‬ومىرج انخيار انمخؼذد ‪072 .....................................................‬‬
‫‪ 07.2.2‬ومىرج انقائمت انمىسذنت ‪073 ....................................................‬‬
‫‪ًَ 11.2‬ىرج اخخيبر يهف نهخحًيم ‪118 ............................................‬‬
‫‪ 11.5‬حمسيى انًُبرج إنً يدًىػبث‪115 ..........................................‬‬
‫‪ 11.1‬األزرار (زر االرسبل و زر انًسح) ‪111 ...................................‬‬
‫‪ 11.1‬حُسيك انًُبرج ‪113 ............................................................‬‬
‫‪07.4.0‬بؼض انخىسيقاث ‪042 ............................................................‬‬
‫‪ 07.4.3‬حرحيب ػىاطر انىمىرج ‪047 ...................................................‬‬
‫‪ 17‬دراست انًشروع انخذريبي‪115 ...............................................‬‬
‫‪ 18‬انخظًيى ‪181 ........................................................... xhtml‬‬
‫‪ 18.1‬هيكم انظفحت ‪181 .............................................................‬‬
‫‪ 18.1‬هيكم انًحخىي ‪183 ............................................................‬‬

‫‪1/7‬‬
‫‪ 15‬انذيكىر ‪188 .............................................................. CSS‬‬
‫‪ 15.1‬انخُسيمبث انؼبيت ‪188 .........................................................‬‬
‫‪ 15.1‬حُسيك رأش انظفحت ‪185 ....................................................‬‬
‫‪ 15.3‬حُسيك انمبئًت انؼهىيت ‪15. ...................................................‬‬
‫‪ 15.2‬حُسيك انًحخىي ‪151 ..........................................................‬‬
‫‪ 15.5‬حُسيك انمبئًت اندبَبيت ‪152 ..................................................‬‬
‫‪ 15.1‬حُسيك يحخىي انمبئًت ‪155 ..................................................‬‬
‫‪ 15.1‬حُسيك ريم انظفحت ‪151 ......................................................‬‬
‫‪ 15.8‬حُسيك يحخىي انظفحت ‪151 .................................................‬‬
‫‪ 15.5‬حىافك انًىلغ يغ يخظفحبث انىيب ‪1.1 ...................................‬‬
‫انفهرش ‪205 .............................................................................‬‬

‫‪1/8‬‬
‫صُرا‪---‬‬

‫‪10/‬‬