‫انذرس انتاسع‪ :‬انصىر‬

‫أىِ ‪ٝ‬نُ٘ سائؼبً إرا رَنْذ ٍِ ٗظغ ص٘سح خَ‪ٞ‬يخ ف‪ٍْ ٜ‬زصف صفسزل؟‬

‫هذا يبدو كتحد‪...‬‬

‫سثَب‪ ،‬ىنِ ف‪ ٜ‬اىسق‪ٞ‬قخ ‪َٝ‬نِ فؼو رىل ثغٖ٘ىخ‪ ،‬مو ٍب رسزبخٔ ٕ٘ ػْصش ٗازذ‪:‬‬

‫مثال ‪:1‬‬

‫عزظٖش ثٖزا اىشنو ف‪ٍ ٜ‬زصفسل‪:‬‬

‫مو ٍب رسزبج أُ رفؼئ ٕ٘ إخجبس اىَزصفر ثأّل رش‪ٝ‬ذ ٗظغ ص٘سح‪ٍ٘ٗ (img) ،‬قؼٖب ‪ ٕ٘ (src,‬اخزصبس‬
‫)"‪ٕ ، "source‬و فَٖذ رىل؟‬

‫الزظ م‪ٞ‬ف أُ ػْصش ‪ ٕ٘ img‬ف‪ّ ٜ‬فغٔ ٗعٌ اىجذا‪ٝ‬خ ٗاإلغالق‪ٍ ،‬ثو >‪ <br /‬ال ‪ٝ‬شرجط ثْص ٍؼ‪.ِٞ‬‬

‫"‪ ٕ٘ " DSC01720.JPG‬اعٌ ٍيف اىص٘سح اىز‪ ٛ‬رش‪ٝ‬ذ ٗظؼٖب ف‪ ٜ‬صفسزل‪ّ٘ ٕ٘".JPG" ٗ ،‬ع ٍيف‬
‫اىص٘سح‪ ،‬رَبٍبً ٍثو اىالزقخ "‪ ".htm‬رظٖش أُ اىَيف ٕ٘ ٗث‪ٞ‬قخ‪ ".jpg" ، HTML‬رخجش اىَزصفر أُ اىَيف ٕ٘‬
‫ص٘سح‪،‬‬

‫أٍب ‪"width="471‬فٖ٘ ٍقبط ػشض اىص٘سح ٗ‪ٍ " height="452‬قبط ط٘ه اىص٘سح‬

‫ْٕبك أّ٘اع ٍخزيفخ ٍِ ٍيفبد اىص٘س اىز‪َٝ ٜ‬نْل إظبفزٖب ىصفسزل ‪:‬‬

‫)‪GIF (Graphics Interchange Format‬‬ ‫‪‬‬

 ‫)‪JPG / JPEG (Joint Photographic Experts Group‬‬ ‫‪‬‬
‫)‪PNG (Portable Network Graphics‬‬ ‫‪‬‬

‫صىر ‪ GIF‬تستخذو عادة نهرسىمات‪ ،‬أما ‪ JPEG‬فتستخذو نهصىر انفىتىغرافية‬

‫‪ٕ،‬زا ىغجج‪ ،ِٞ‬األٗه ص٘س ‪َٝ GIF‬نْٖب أُ رس٘‪ ٛ‬فقط ‪ 256‬ىّ٘بً‪ ،‬ث‪َْٞ‬ب ‪َٝ JPEG‬نْٖب أُ رس٘‪ٍ ٛ‬ال‪ ِٞٝ‬األى٘اُ‪،‬‬
‫ٗاىغجت اىثبّ‪ ٕ٘ ٜ‬أُ ‪ ٜٕ GIF‬ص‪ٞ‬غخ ٍيف أفعو ىعغط اىص٘س اىجغ‪ٞ‬طخ أٍب ‪ JPEG‬فٖ‪ ٜ‬أفعو ىيص٘س‬
‫اىَؼقذح اىز‪ ٜ‬رس٘‪ ٛ‬رفبص‪ٞ‬و مث‪ٞ‬شح‪ٗ ،‬ميَب صاد ظغط اىص٘سح صغش زدَٖب‪ٕٗ ،‬زا ‪ٝ‬ؼْ‪ ٜ‬أُ صفسزل عزظٖش‬
‫ثغشػخ أمجش‪ٗ ،‬سثَب رؼشف ٍِ خجشرل ف‪ ٜ‬اىَ٘اقغ أُ اىصفسبد اىثق‪ٞ‬يخ ‪َٝ‬نْٖب أُ رنُ٘ ثط‪ٞ‬ئخ ثشنو مج‪ٞ‬ش ىذسخخ‬
‫رضػح اىضائش‪.‬‬

‫ف‪ ٜ‬اىَبظ‪ ٜ‬مبّزب ص‪ٞ‬غخ اىص٘سح ‪JPEG ٗ GIF‬األمثش اعزخذاٍبً ف‪ ٜ‬صفسبد اىَ٘اقغ‪ٍ ،‬ؤخشاً ص‪ٞ‬غخ اىص٘س‬
‫‪ PNG‬ثذأد رنزغت شٖشح أمثش ٗأمثش ػي‪ ٚ‬زغبة ص‪ٞ‬غخ‪ ، GIF‬صيغة ‪ PNG‬تحىي عذة طرق تجمع بيه‬
‫فعال‬
‫مميزات ‪ GIF‬و‪ ، JPEG‬حيث يمكنها أن تحىي مالييه انصىر وتقىو بضغطها بشكم ‪.‬‬

‫هل هذا كل ما أحتاجه لمعزفته حول الصور؟‬

‫ْٕبك أش‪ٞ‬بء أخش‪ٝ ٙ‬دت أُ رؼشفٖب ز٘ه اىص٘س‪ ،‬أٗالً ‪َٝ‬نْل أُ رقً٘ ثئظبفخ ص٘سح ٍِ ٍديذ آخش أٗ زز‪ٍِ ٚ‬‬
‫ٍ٘قغ آخش‪:‬‬

‫مثال ‪:2‬‬

‫مثال ‪:3‬‬

‫ثبّ‪ٞ‬بً‪َٝ ،‬نِ ىيص٘س أُ رنُ٘ سٗاثط‪:‬‬

‫مثال ‪:4‬‬

‫ػْذٍب رش‪ٝ‬ذ ٗظغ ص٘سح فأّذ رسزبج خبص‪ٞ‬خ ‪ src‬اىز‪ ٜ‬رخجش اىَزصفر ػِ ٍنبُ اىص٘س‪ ،‬ثدبّت رىل ْٕبك ػذد‬
‫ٍِ اىخصبئص اىز‪َٝ ٜ‬نِ أُ رنُ٘ ٍف‪ٞ‬ذح ػْذ إظبفخ اىص٘س‬

‫خبص‪ٞ‬خ‪alt‬‬
‫رغزخذً ىزؼط‪ٗ ٜ‬صفبً ثذ‪ٝ‬الً ىيص٘سح إرا ىٌ رظٖش اىص٘سح أل‪ ٛ‬عجت ع‪ٞ‬ش‪ ٙ‬اىَغزخذً ّصبً ثذ‪ٝ‬الً ‪ٝ‬ششذ ٍسز٘‪ٝ‬بد‬
‫اىص٘سح‪ٕ ،‬زٓ اىخبص‪ٞ‬خ ٍَٖخ خص٘صبً ىَِ ‪ٝ‬ؼبّ‪ ٍِ ٜ‬أ‪ ٛ‬إػبقخ ثصش‪ٝ‬خ‪ ٜٕٗ ،‬مزىل ٍف‪ٞ‬ذح ف‪ ٜ‬زبه ىٌ رظٖش‬
‫اىص٘س ثغشػخ مبف‪ٞ‬خ‪ ،‬ىزىل اعزخذً دائَبً خبص‪ٞ‬خ‪alt:‬‬

‫مثال ‪:5‬‬
 ‫ثؼط اىَزصفسبد رؼشض اىْص اىجذ‪ٝ‬و ف‪ٍ ٜ‬شثغ صغ‪ٞ‬ش ‪ٝ‬ظٖش ىيَغزخذً ػْذٍب ‪ٝ‬عغ ٍؤشش اىفأسح ػي‪ٚ‬‬
‫اىص٘سح‪ ،‬الزظ ػْذ اعزخذاً خبص‪ٞ‬خ ‪ alt‬اىٖذف ٕ٘ رقذ‪ّ ٌٝ‬ص ثذ‪ٝ‬و ‪ٝ‬صف اىص٘س‪ ،‬خبص‪ٞ‬خ ‪ٝ alt‬دت أال‬
‫رغزخذً ىؼشض اىشعبئو خبصخ ىيَغزخذً ألُ اىز‪ٝ ِٝ‬ؼبُّ٘ ٍِ اإلػبقخ اىجصش‪ٝ‬خ ع‪ٞ‬غَؼُ٘ اىْص اىجذ‪ٝ‬و ثذُٗ أُ‬
‫‪ٝ‬فَٖ٘ا ٍؼْبٓ أٗ ‪ٝ‬ذسم٘ا ٍسز٘‪ ٙ‬اىص٘سح‪.‬‬

‫اىخبص‪ٞ‬خ‪title‬‬
‫‪َٝ‬نِ اعزخذاٍٖب ىزقذ‪ٍ ٌٝ‬ؼيٍ٘بد إظبف‪ٞ‬خ ىيص٘سح‪:‬‬

‫مثال ‪:6‬‬

‫ْٕبك خبص‪ٞ‬زبُ ٍَٖزبُ َٕٗب ‪height:ٗ width‬‬

‫مثال ‪:7‬‬

‫اىخبص‪ٞ‬خ ‪َٝheight ٗ width‬نِ اعزخذاٍٖب ىزسذ‪ٝ‬ذ ط٘ه ٗػشض اىص٘سح‪ ،‬اىق‪َٞ‬خ اىز‪ ٜ‬ر٘ظغ ىيط٘ه‬
‫ٗاىؼشض رقبط ثبىجنغو‪ٗ ،‬اىجنغو ٕ٘ ٗزذح ق‪ٞ‬بط دقخ اىشبشخ‪ٍ ،‬ؼظٌ اىشبشبد ىٖب دقخ ‪ٗ ،768 ×1024‬ػي‪ٚ‬‬
‫ػنظ ٍق‪ٞ‬بط اىغْزَ‪ٞ‬زش‪ ،‬اىجنغو ‪ٝ‬خزيف زدَٔ ثسغت دقخ اىشبشخ‪ ،‬فَغزخذً ىذ‪ ٔٝ‬شبشخ راد دقخ ػبى‪ٞ‬خ قذ ‪ٝ‬نُ٘‬
‫اىغْزَ‪ٞ‬زش ‪ٝ‬غبٗ‪ ٛ‬ف‪ ٜ‬شبشزٔ ‪ 25‬ثنغو‪ ،‬ىنِ ف‪ ٜ‬شبشخ أخش‪ ٙ‬قذ رغبٗ‪ 1.5 ٛ‬عْزَ‪ٞ‬زش‪.‬‬

‫إرا ىٌ رعغ ٍق‪ٞ‬بعبً ىيؼشض ٗاىط٘ه فبىص٘سح عز٘ظغ ثَق‪ٞ‬بعٖب‪ ،‬ىنِ ثبىخبص‪ٞ‬ز‪َٝ ِٞ‬نِ اىزالػت ثسدٌ اىص٘سح ‪:‬‬

‫مثال ‪:8‬‬

‫ع‪ٞ‬ظٖش ثٖزا اىشنو ف‪ٍ ٜ‬زصفسل‬

‫ػٍَ٘بً‪ ،‬اّزجٔ إى‪ ٚ‬أُ زدٌ اىص٘سح ثبىن‪ٞ‬ي٘ثب‪ٝ‬ذ ع‪ٞ‬جق‪ ٚ‬مَب ٕ٘ ٗعزأخز اىص٘سح ّفظ اى٘قذ ىزظٖش ىيَغزخذً زز‪ٚ‬‬
‫ى٘ مبّذ صغ‪ٞ‬شح اىسدٌ ٍِ ّبز‪ٞ‬خ اىَظٖش‪ ،‬ىزىل عهيك أال تصغر مقياس صىرة باستخذاو خاصيتي انطىل‬
‫وانعرض ‪ ،‬ثذالً ٍِ رىل قٌ ثزصغ‪ٞ‬ش اىص٘س ٍِ خاله ثشّبٍح ٍسشس ص٘س ىن‪ ٜ‬ردؼيٖب أصغش زدَبً‬

‫ٍغ رىل‪ ،‬رظو فنشح خ‪ٞ‬ذح أُ رغزخذً خبص‪ٞ‬ز‪ ٜ‬اىط٘ه ٗاىؼشض ألُ اىَزصفسبد رغزط‪ٞ‬غ أُ رؼشف مٌ ٍغبزخ‬
‫اىص٘سح اىز‪ٝ ٜ‬دت أُ رظٖش ف‪ ٜ‬اىصفسخ فزغشع ثزىل ظٖ٘س اىصفسخ ىيَغزخذً‪<..... .‬‬