Scribd Logo
Upload

Welcome to Scribd!

  • مملكة تصميم المواقع الجزء الثالث

    Uploaded by

    jamal jamal
    5 views51 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views51 pages

    مملكة تصميم المواقع الجزء الثالث

    Uploaded by

    jamal jamal

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 51

    1

    ‫ما هو )‪Responsive Web Design(RWD‬‬ ‫‪3‬‬

    ‫مقدمة عن ‪Viewport‬‬ ‫‪4‬‬

    ‫ماهو ‪Viewport‬‬ ‫‪4‬‬

    ‫الصغية العامة لتعريف ‪Viewport‬‬ ‫‪4‬‬

    ‫مثال بدون استخدام ‪Viewport‬ومثال أخر باستخدام ‪Viewport‬‬ ‫‪5‬‬

    ‫الخاصية ‪box-sizing‬‬ ‫‪8‬‬

    ‫مثال بدون استخدام الخاصية ‪box-sizing‬‬ ‫‪8‬‬

    ‫‪12‬‬
    ‫‪Media Query‬‬
    ‫‪12‬‬
    ‫الصغية العامة لتعريف ‪@media‬‬
    ‫تعريف أكثر من استايل‬ ‫‪19‬‬

    ‫‪24‬‬
    ‫استخدام الصور )‪(images‬‬
    ‫‪30‬‬
    ‫استخدام الفيديو )‪(video‬‬
    ‫‪37‬‬
    ‫استخدام الجداول )‪(tables‬‬
    ‫تصميم صفحة ويب متكاملة‬ ‫‪45‬‬

    ‫‪48‬‬
    ‫استخدام )‪)(RWD‬اه‪(D‬‬
    ‫السئلة‬ ‫‪49‬‬

    ‫الكتاب مجاني ول يجوز بيعه أو نسخه عل ى ورق أو إقتص اص‬


    ‫جزء منه أو ترجمته إلى لغة أخرى أو ترجمة ج زء من ه الب إذن‬
    ‫ص احب الكت اب وللتواص ل م ع ص احب الكت اب عل ى اليمي ل‪:‬‬
    ‫‪mohammad200610022@gmail.com‬‬

    ‫‪2‬‬
    ‫ما هو )‪Responsive Web Design(RWD‬‬

    ‫‪ RWD‬ليست لغة برمجة وإنما تعتمد عل كل من ‪ HTML‬و ‪ CSS‬وه‪CC‬ي‬


    ‫المسئولة ع‪CC‬ن )ع‪CC‬ل موقع‪CC‬ك متواف‪CC‬ق م‪CC‬ع ال)ه‪ (DCC‬الذكي‪CC‬ة س‪CC‬واء ف‪CC‬ي‬
    ‫أ)ه‪ (D‬الهواتف أو أ)ه‪ (D‬التابلت بحيث تع‪CC‬رض )مي‪CC‬ع محتوي‪CC‬ات الموق‪CC‬ع‬
    ‫على حسب حجم الشاشة‪.‬‬

    ‫‪3‬‬
    ‫مقدمة عن ‪Viewport‬‬

    ‫قبل ظهور ال)ه‪ D‬اللوحية والهواتف الذكي‪CC‬ة ت‪CC‬م تص‪CC‬ميم ص‪CC‬فحات ال‪C‬ويب‬
    ‫لتكون ملئمة لشاشات الحواسيب فقط ‪.‬وعند ظه‪CC‬ور ال)ه‪ (DCC‬الت‪CC‬ابلت‬
    ‫والهواتف الذكية كانت صفحات الويب ذات حجم ك‪CC‬بير للتتناس‪CC‬ب عل‪CC‬ى‬
    ‫‪ Viewport‬ولحل ه‪CC‬ذه المش‪CC‬كلة يج‪CC‬ب تقلي‪CC‬ص حج‪CC‬م ص‪CC‬فحات ال‪CC‬ويب‬
    ‫)تصغير حجم صفحات الويب إن ص‪CC‬ح المعن‪CC‬ى( للتتناس‪CC‬ب م‪CC‬ع شاش‪CC‬ة‬
    ‫اله‪CC‬اتف أو الت‪CC‬ابلت رغ‪CC‬م أن الح‪CC‬ل لي‪CC‬س )ي‪CC‬داً بم‪CC‬ا في‪CC‬ه الكفاي‪CC‬ة ولكن‪CC‬ه‬
    ‫سريع‪.‬‬

    ‫ماهو ‪Viewport‬‬

    ‫‪ Viewport‬هو عنصر يعطي تعليمات للمتصفح بكيفية عرض الص‪CC‬فحة أو‬


    ‫الصفحات من حيث البعاد والتحجيم‪.‬‬

    ‫الصغية العامة لتعريف ‪Viewport‬‬

    ‫‪<"meta‬‬ ‫> ‪name="viewport" content="width=device-width, initial-scale=1.0‬‬

    ‫‪4‬‬
    ‫حيث أن ‪:‬‬
    ‫‪ -1‬تم تعريف وسم أو عنصر و‪ <meta‬وهذا العنصر تم شرحه في الج‪D‬ء‬
    ‫الول من كتاب مملك‪CC‬ة تص‪CC‬ميم المواق‪CC‬ع)‪ (HTML, CSS‬وقل‪CC‬ت أن ه‪CC‬ذا‬
    ‫العنصر يستخدم بين وسميو‪ <head><head/‬أو رأ< الصفحة‬
    ‫‪ :name -2‬لتحديد اسم)‪ (meatdata‬أو البيانات الوصفية‬
    ‫‪ :content-3‬لعطائها قيمة م‪CC‬ن أ)‪CC‬ل ربطه‪CC‬ا م‪CC‬ع الخاص‪CC‬ية )‪ (name‬أو )‬
    ‫‪ (http-equiv‬حي‪CC‬ث القيم‪CC‬ة الول‪CC‬ى ك‪CC‬انت )‪ (width=device-width‬أي يعن‪CC‬ي‬
    ‫إعرض الص‪CC‬فحة أو الص‪C‬فحات للتتناس‪CC‬ب م‪C‬ع حج‪C‬م الشاش‪CC‬ة‪ .‬والقيم‪CC‬ة‬
    ‫الثاني‪CC‬ة ه‪CC‬ي )‪ (initial-scale=1.0‬أي أن‪CC‬ه يق‪CC‬وم بتحدي‪CC‬د مس‪CC‬توى تك‪CC‬بير‬
    ‫الصفحة)‪ (zoom level‬للمر( الولى عند تحميلها من قبل المتصفح‬

    ‫مثال بدون استخدام ‪Viewport‬ومثال أخر باستخدام ‪Viewport‬‬

    ‫‪5‬‬
    ‫بدون استخدام ‪Veiwport‬‬

    ‫‪6‬‬
    Veiwport ‫باستخدام‬

    7
    ‫الخاصية ‪box-sizing‬‬

    ‫‪box-sizing‬‬ ‫الخاصية‬
    ‫تس‪CC‬مح ل‪CC‬ك ه‪CC‬ذه الخاص‪CC‬ية بتض‪CC‬مين )‪ (padding‬و)‪ (border‬للمجم‪CC‬و‪b‬‬
    ‫الكل‪CC‬ي للع‪CC‬رض)‪(width‬والرتف‪CC‬ا‪ (height)b‬للعناص‪CC‬ر أو الوس‪CC‬وم وه‪CC‬ي‬
    ‫مهمة في عملية )‪(responsive‬‬

    ‫باس‪CC‬تخدام الخاص‪CC‬ية )‪(box-sizing‬يمك‪CC‬ن حس‪CC‬اب الع‪CC‬رض والرتف‪CC‬ا‪b‬‬


    ‫للعنصر أو الوسم بالطريقة التالية‪:‬‬

    ‫العرض الفعلي للعنصر = ‪width + padding + border‬‬


    ‫الرتفا‪ b‬الفعلي للعنصر = ‪height + padding + border‬‬

    ‫مثال بدون استخدام الخاصية ‪box-sizing‬‬

    ‫‪8‬‬
    9
    ‫ف‪CC‬ي ه‪CC‬ذا المث‪CC‬ال )‪ (div2‬أك‪CC‬بر م‪CC‬ن )‪ (div1‬الس‪CC‬بب لن )‪ (div2‬ل‪CC‬ديها‬
    ‫الخاصية )‪. (padding‬‬
    ‫السؤال الن كيف سوف نجعل كل م‪CC‬ن )‪(div1‬و)‪ (div2‬ل‪CC‬ديهم نف‪CC‬س‬
    ‫العرض ؟‬

    ‫الجواب‪ :‬باستخدام الخاصية ‪box-sizing‬‬

    ‫‪10‬‬
    11
    ‫هل لحظت الفرق الن؟‬
    ‫ف‪CC‬ي الس‪CC‬طر ‪ 5‬قم‪CC‬ت بتعري‪CC‬ف ش‪CC‬يء )دي‪CC‬د وه‪CC‬ي علم‪CC‬ة )*( ه‪CC‬ذه العلم‪CC‬ة‬
    ‫وظيفتها أنها تطبق )ميع الخصائص على )ميع العناص‪CC‬ر دون اس‪CC‬تثناء أي انه‪CC‬ا‬
    ‫سوف تطبق خاصية )‪ (box-sizing‬على كل من العنصر)‪ (div1‬و)‪(div2‬‬
    ‫في السطر ‪ 6‬قمت بتعريف الخاصية )‪ (box-sizing‬حيث القيمة ك‪CC‬انت )‪border-‬‬
    ‫‪(box‬أي سوف تعمل على تض‪CC‬مين )‪ (padding‬و)‪ (border‬م‪CC‬ع الع‪CC‬رض والرتف‪CC‬ا‪b‬‬
    ‫وبالتالي أصبح كل من )‪ (div1‬و)‪ (div2‬بنفس العرض‬

    ‫‪Media Query‬‬

    ‫يمكن اختصار تعريف )‪ (media query‬بأنه المسؤول عن تغيير اس‪CC‬تايل‬


    ‫الصفحة حتى تتوافق مع ال)ه‪ (DCC‬الذكي‪CC‬ة ع‪CC‬ن طري‪CC‬ق تعري‪CC‬ف خص‪CC‬ائص‬
    ‫‪ CSS‬لكل عنصر داخل )‪(@media‬‬

    ‫الصغية العامة لتعريف ‪@media‬‬

    ‫)‪@media not|only mediatype and (expressions‬‬


    ‫{‬
    ‫;‪CSS-Code‬‬
    ‫}‬

    ‫حيث ‪:‬‬
    ‫‪ :@media-1‬تكتب كما هي عند التعريف‬
    ‫‪ :not | only -2‬وهي ترتبط مع )‪ (mediatype‬حيث أن )‪ (not‬تعني في حال لم تكن‪/‬يكن‬
    ‫و)‪ (only‬تعني في حال كانت‪/‬كان‬
    ‫‪ :mediatype -3‬وتأخذ اربعة قيم وهي)‪(screen, print, all, speech‬‬
    ‫‪ :and (expressions)-4‬هنا يكتب الشرط وفي حال تحقق الشرط ينفذ ‪CSS‬‬

    ‫‪12‬‬
    13
    ‫كل ما يهمنا في هذا المثال هما الس‪CC‬طرين ‪ 4‬و ‪ 21‬ام‪CC‬ا ب‪CC‬اقي الس‪CC‬طر فه‪CC‬ي‬
    ‫مفهومة ‪.‬‬

    ‫ف‪CC‬ي الس‪CC‬طر ‪ 4‬عرف‪CC‬ت و‪ <meta‬م‪CC‬ن أ)‪CC‬ل )‪ (viewport‬ح‪CC‬تى يعط‪CC‬ي تعليم‪CC‬ات‬


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

    ‫ف‪CC‬ي الس‪CC‬طر ‪ 21‬عرف‪CC‬ت )‪ (@media‬وس‪CC‬وف اختص‪CC‬ر علي‪CC‬ك م‪CC‬اذا يعن‪CC‬ي ه‪CC‬ذا‬


    ‫السطر؟‬

    ‫الجواب‪:‬‬
    ‫معنى هذا السطر هو أن ك أخ برت المتص فح ف ي ح ال ك انت )‪(only‬‬
    ‫ع رض)‪ (width‬ال‪d‬ا‪ h‬ة)‪ (phone,tablet,..etc‬ه و )‪ (768px‬أو أص غر نف ذ‬
    ‫خص ائص ‪ CSS‬وه ي أن تجع ل )‪ (width=100%‬للعناص ر ال تي ت م‬
    ‫اعطائه ا ه ذا )‪(class‬وأن تجع ل الل ون الخ‪ s‬ر)‪(background=green‬‬
    ‫للعناصر التي تم اعطائها هذا )‪(id‬‬

    ‫الن عند التنفيذ في حال كان عرض الشاشة أكبر من ‪ 768px‬لن ينفذ الس‪CC‬طر‬
    ‫‪ 21‬كما هو موضح في الصور( التي فوق‬

    ‫‪14‬‬
    ‫وفي حال كان عرض الشاشة ‪ 768px‬أو أصغر سوف ينفذ الس‪CC‬طر ‪ 21‬كم‪CC‬ا ه‪CC‬و‬
    ‫موضح في الصور( التي فوق‬

    ‫ملحظة‪ :‬يمكنك تكبير وتصغير حجم المتصفح لديك لترى التأثير‬

    ‫‪15‬‬
    ‫في الس طر ‪ 21‬أخ برت المتص فح ف ي ح ال ل م يك ن )‪ (not‬ع رض)‬
    ‫‪ (width‬ال‪d‬ا‪ h‬ة)‪ (phone,tablet,..etc‬ه و)‪(768px‬أو أك بر نف ذ خص ائص‬
    ‫‪ CSS‬وهي أن تجعل )‪ (width=100%‬للعناصر ال تي ت م اعطائه ا ه ذا )‬
    ‫‪(class‬وأن تجعل اللون الخ‪s‬ر)‪ (background=green‬للعناصر ال تي ت م‬
    ‫اعطائها هذا )‪(id‬‬

    ‫‪16‬‬
    ‫الن عند التنفيذ في حال كان عرض الشاشة لم يس‪CC‬اوي ‪ 768px‬أو أك‪CC‬بر م‪CC‬ن‬
    ‫القيمة سوف ينفذ السطر ‪ 21‬كما هو موضح في الصور( التي فوق‬

    ‫‪17‬‬
    ‫في حال كان عرض الشاشة يساوي ‪ 768px‬أو أصغر لن ينفذ السطر ‪ 21‬كما‬
    ‫هو موضح في الصور( التي فوق‬

    ‫‪18‬‬
    ‫تعريف أكثر من استايل‬

    ‫يمكن تعريف أكثر من استايل في نفس الص‪CC‬فحة فمثل يمكن‪CC‬ك تعري‪CC‬ف‬


    ‫استايل يتواف‪CC‬ق م‪CC‬ع حج‪CC‬م شاش‪CC‬ات الت‪CC‬ابلت ويمكن‪CC‬ك تعري‪CC‬ف اس‪CC‬تايل‬
    ‫يتوافق مع حجم شاشات الهواتف الذكية وكذلك يمكنك تعريف استايل‬
    ‫يتوافق مع شاشات الكمبيوتر‪.‬‬

    ‫‪19‬‬
    20
    ‫شاشة كمبيوتر‬

    ‫‪21‬‬
    ‫شاشة تابلت‬

    ‫‪22‬‬
    ‫شاشة هاتف‬

    ‫‪23‬‬
    ‫استخدام الصور )‪(images‬‬

    ‫يمكن التحك‪CC‬م ف‪CC‬ي الص‪CC‬ور م‪CC‬ن خلل )‪ (RWD‬بس‪CC‬هولة حي‪CC‬ث يمكن‪CC‬ك‬


    ‫التحك‪CCC‬م ف‪CCC‬ي حج‪CCC‬م الص‪CCC‬ور( للتواف‪CCC‬ق م‪CCC‬ع حج‪CCC‬م الشاش‪CCC‬ات )‬
    ‫‪(phone,table,...etc‬‬

    ‫‪24‬‬
    25
    26
    ‫شاشة )هاز كمبيوتر‬

    ‫من السطر ‪ 11‬الى السطر ‪ 28‬تم تنفيذ خص‪CC‬ائص ‪ CSS‬عل‪CC‬ى شاش‪CC‬ة‬


    ‫)هاز الكمبيوتر‬

    ‫‪27‬‬
    ‫شاشة )هاز التابلت‬

    ‫من السطر ‪ 30‬الى السطر ‪ 55‬تم تنفيذ خص‪CC‬ائص ‪ CSS‬عل‪CC‬ى شاش‪CC‬ة‬


    ‫)هاز التابلت‬

    ‫‪28‬‬
    ‫شاشة )هاز الهاتف‬

    ‫من السطر ‪ 58‬الى السطر ‪ 80‬تم تنفيذ خص‪CC‬ائص ‪ CSS‬عل‪CC‬ى شاش‪CC‬ة‬


    ‫)هاز الهاتف‬

    ‫‪29‬‬
    ‫استخدام الفيديو )‪(video‬‬

    ‫ل يختلف الفيديو عن الصور فيمكن‪CC‬ك التحك‪CC‬م ف‪CC‬ي الفي‪CC‬ديو م‪CC‬ن خلل )‬


    ‫‪ (RWD‬بسهولة حيث يمكنك التحك‪CC‬م ف‪CC‬ي حج‪CC‬م الفي‪CC‬ديو للتواف‪CC‬ق م‪CC‬ع‬
    ‫حجم الشاشات )‪(phone,table,...etc‬‬

    ‫‪30‬‬
    31
    32
    33
    ‫شاشة )هاز كمبيوتر‬

    ‫من السطر ‪ 11‬الى السطر ‪ 25‬تم تنفيذ خص‪CC‬ائص ‪ CSS‬عل‪CC‬ى شاش‪CC‬ة‬


    ‫)هاز الكمبيوتر‬

    ‫‪34‬‬
    ‫شاشة )هاز التابلت‬

    ‫من السطر ‪ 32‬الى السطر ‪ 60‬تم تنفيذ خص‪CC‬ائص ‪ CSS‬عل‪CC‬ى شاش‪CC‬ة‬


    ‫)هاز التابلت‬

    ‫‪35‬‬
    ‫شاشة )هاز الهاتف‬

    ‫من السطر ‪ 63‬الى السطر ‪ 88‬تم تنفيذ خص‪CC‬ائص ‪ CSS‬عل‪CC‬ى شاش‪CC‬ة‬


    ‫)هاز الهاتف‬

    ‫‪36‬‬
    ‫استخدام الجداول )‪(tables‬‬

    ‫يمكنك التحكم في الجداول م‪CC‬ن خلل )‪ (RWD‬بس‪CC‬هولة حي‪CC‬ث يمكن‪CC‬ك‬


    ‫التحكم في حجمها للتوافق مع حجم الشاشات )‪(phone,table,...etc‬‬

    ‫‪37‬‬
    38
    39
    40
    41
    ‫شاشة )هاز الكمبيوتر‬

    ‫من السطر ‪ 6‬الى السطر ‪ 60‬ت‪CC‬م تنفي‪CC‬ذ خص‪CC‬ائص ‪ CSS‬عل‪CC‬ى شاش‪CC‬ة‬


    ‫)هاز الكمبيوتر‬

    ‫‪42‬‬
    ‫شاشة )هاز التابلت‬

    ‫من السطر ‪ 62‬الى السطر ‪ 104‬تم تنفيذ خصائص ‪ CSS‬على شاش‪CC‬ة‬


    ‫)هاز التابلت‬

    ‫‪43‬‬
    ‫شاشة )هاز الهاتف‬

    ‫م‪CC‬ن الس‪CC‬طر ‪ 106‬ال‪CC‬ى الس‪CC‬طر ‪ 147‬ت‪CC‬م تنفي‪CC‬ذ خص‪CC‬ائص ‪ CSS‬عل‪CC‬ى‬


    ‫شاشة )هاز الهاتف‬

    ‫‪44‬‬
    ‫تصميم صفحة ويب متكاملة‬

    ‫قمت بتصميم صفحة ويب متكاملة حيث أنها متوافقة مع شاشات ك‪CC‬ل‬
    ‫ال)ه‪ (D‬وسوف أقوم بإرفاق الملف مع الكتاب حتى يستفيد الك‪CC‬ل م‪CC‬ن‬
    ‫هذا التصميم ‪.‬‬

    ‫شاشة )هاز حاسب‬

    ‫‪45‬‬
    ‫شاشة )هاز تابلت‬

    ‫‪46‬‬
    ‫شاشة )هاز هاتف‬

    ‫‪47‬‬
    ‫استخدام )‪)(RWD‬اه‪(D‬‬

    ‫إذا كنت تريد أن تختصر عل‪CC‬ى نفس‪CC‬ك ال‪CC‬وقت ف‪CC‬ي تص‪CC‬ميم الموق‪CC‬ع ول‬
    ‫تريد أن تدخل في الكثير من التفاص‪CC‬يل ف‪CC‬ي ع‪CC‬الم )‪. (RWD‬إذا يمكن‪CC‬ك‬
    ‫تحميل )‪) (frameworks‬اه‪ (D‬لجعل موقعك متوافق م‪CC‬ع ال)ه‪ .(DCC‬فق‪CC‬ط‬
    ‫كل ما عليك فعله هو تحمي‪CC‬ل )‪ (framework‬عل‪CC‬ى الموق‪CC‬ع واس‪CC‬تدعائه‬
    ‫على العناصر أو الوسوم في موقعك‬

    ‫ومن هذه )‪:(frameworks‬‬

    ‫‪(http://www.w3schools.com/lib/w3.css)-1‬‬
    ‫‪(/http://getbootstrap.com/getting-started )-2‬‬

    ‫النهاية‬

    ‫‪48‬‬
    ‫السئلة‬
    ‫‪ -1‬ما هو تعريف )‪(RWD‬؟‬

    ‫‪ -2‬ما هو )‪(viewport‬؟‬

    ‫‪ -3‬ما هو )‪(Media Query‬؟‬

    ‫‪ -4‬المطلوب منك هو تصميم )‪D‬ء من الصفحة بحيث يكون‬


    ‫متوافق على أ)ه‪ (D‬التابلت والهواتف‬

    ‫‪49‬‬
    ‫‪ -5‬قم بتصميم صفحة متكاملة تتكلم عن السير( الذاتية‬
    ‫الخاصة بك‬

    ‫‪-6‬قم بتصميم موقع كما في الصور( بحيث يكون متوافق‬


    ‫مع كل ال)ه‪(D‬؟‬

    ‫‪50‬‬
    ‫المرا)ع‬
    ‫ت‪CC‬م الس‪CC‬تعانة بموق‪CC‬ع ‪ /http://www.w3schools.com‬لتس‪CC‬هيل الم‪CC‬اد(‬
    ‫على القارئ وهناك إضافات وأمثلة كثير( في الكتاب غير مو)ود( في‬
    ‫الموقع‬

    ‫*لتحميل كتاب مملكة تصميم المواقع ‪ HTML, CSS‬الجرء الول‬


    ‫على الرابط التالي‪:‬‬
    ‫‪http://www.kutub.info/library/book/18973‬‬

    ‫لتحميل كتاب مملكة تصميم المواقع ‪ HTML5,CSS3‬الجرء الثاني‬


    ‫على الرابط التالي‪:‬‬
    ‫‪http://111000.net/wdesign/pbooks/134-htmlbooks/590-wdesign-kingdom2‬‬

    ‫*قريبا سوف يتم إصدار كتاب مملكة )افا سكربت)‪(Java Script‬‬

    ‫* الكت اب مج اني ول يج وز بيع ه أو نس خه عل ى ورق أو‬


    ‫إقتصاص جزء منه أو ترجمته إلى لغة أخرى أو ترجمة جزء منه‬
    ‫الب إذن ص احب الكت اب وللتواص ل م ع ص احب الكت اب عل ى‬
    ‫اليميل‪mohammad200610022@gmail.com:‬‬

    ‫أخي القارئ إن ثمن هذا الكتاب هو ال‪C‬دعاء ل‪C‬ي ولوال‪C‬دي وللمس‪C‬لمين‬


    ‫والمسلمات والمؤمنين والمؤمنات الحياء منهم والموات‬

    ‫ي(‬ ‫ي‬
    ‫الع َعالَم َ‬ ‫الَ عمد ليله يه َرب‬ ‫)و ي‬
    ‫آخر َد عع َواه عم أَ عن ع‬ ‫َ‬
    ‫وصل ل وسلم وبارك على ممد وعلى أله وصحبه أجعي‬

    ‫‪51‬‬

    You might also like