[vk][html] تنظيم الفقرات و النصوص !

DeletedUser4248

Guest
plapl_13276758381.png


أهلا , الدورة مستمرة الى ان ننهي الدروس html الاساسية باذن الله

بسم الله , الصفحة البيضاء التي تمكنا من إنشائها في الدروس السابقة ستبدو أجمل بسبب الخربشات التي سنجربها الآن , لكن لكي توضح محتوى صفحتك يجب أن تقوم بملئها :)​

سنبدأ بمحاولة كتابة نصوص و فقرات في هذا الدرس . كما سنرى انه لا يصح ان نكتب بصفة عشوائية : علينا ألا ننسى ان صفحة HTML تحوي على عناصر. هذه العناصر تبين للمتصفح شكل الفقرة مثلا : هذه هي الفقرة , هذا هو العنوان ..الخ.
سنكتشف في هذا الدرس العديد من العناصر الخاصة بلغة الـ HTML.
سنرى في هذا الدرس

  • كيف نكتب فقرة
  • كيف نبني صفحتك بإضافة عنوان
  • كيف نعطي أهمية خاصة لبعض الكلمات داخل الفقرة
  • كيف ننظم فقرات على شكل نقاط و قائمة أرقام.

hostk13055664572.png



الفقرات

​
في معظم الوقت, عندما نكتب فقرة على صفحة ويب , نضع بداخلها عدد من الفقرات. لغة HTML تقترح بشأن هذا العنصر <p> لتحديد الفقرات.

HTML: 
<p>مرحباً بكم في صفحتي !!</p>


  • <p> تعني "بداية الفقرة"
  • </p> تعني "نهاية الفقرة"
كما تعلمنا في الدرس السابق, علينا كتابة محتوى صفحتنا داخل العنصرين <body></body>. إذا يجب علينا فقط وضع فقرتنا داخل العنصرين , و سنحصل على أول صفحة حقيقة بواسطة نصوص .سنواصل نفس الأكواد التي عملنا بها في الدرس السابق, و على هذا سأضيف فقرتي:
HTML: 
<!DOCTYPE html>
<html dir="rtl">
    <head>
        <meta charset="utf-8" />
        <title>العنوان</title>
    </head>

    <body>
        <p>اهلا و سهلا في موقعي !</p>
    </body>
</html>
تجربة

قم بالتجربة, و شاهد النتيجة !
جيد, ليس بشيء كثير, لكنها بداية جيدة إذا لم تواجه أي مشكلة. :)
سنرى الآن شيء خاصة تقريبا بالـ HTML : القفز لسطر جديد. قد يبدوا سهل , لكن كما سترون ليس كالمعتاد في محررات النصوص العادية...


​
إلى سطر جديد

في الـ HTML, إذا ضغطت على زر إدخال , لن يقوم بإنشاء سطر جديد كالمعتاد قم بتجربة هذه الاكواد و لاحظ النتيجة:
HTML: 
<!DOCTYPE html>
<html dir="rtl">
    <head>
        <meta charset="utf-8" />
        <title>تجربة قفز سطر الى سطر جديد</title>
    </head>

    <body>
        <p>
            اهلا و سهلا في موقعي !
            هذه اول تجربة لي, لهذا يرجى التفهم, سأتعلم خطوة بخطوة كيف تسير هذه الامور.
            في الوقت الحالي قد تبدوا الامور غير جميلة, لكن مع الوقت سأتعلم امور جديد و اطور مهارتي, أأكد لكم اني سأفاجئكم دائما !
        </p>
    </body>
</html>



كل شيء ظهر بنفس السطر صحيح ؟ :p

كما تعتقدون هناك حتما طريقة لإنشاء سطر جديد في الـ HTML.
باختصار, إذا أردت إنشاء فقرة جديدة عليك بالاستعمال هذا العنصر <p>.
اكواد الـ HTML الخاصة بك! عليك الآن ملئها بالعنصر الجديد
مثال:
HTML: 
<!DOCTYPE html>
<html dir="rtl">
    <head>
        <meta charset="utf-8" />
        <title>الفقرات</title>
    </head>

    <body>
            <p>
            اهلا و سهلا في موقعي !
            هذه اول تجربة لي, لهذا يرجى التفهم, سأتعلم خطوة بخطوة كيف تسير هذه الامور.
            </p>
            
            <p>
            في الوقت الحالي قد تبدوا الامور غير جميلة, لكن مع الوقت سأتعلم امور جديد و اطور مهارتي, أأكد لكم اني سأفاجئكم دائما !
            </p>
    </body>
</html>
تجربة

نعم, لكن إذا أردت النزول فقط لسطر موالي, ليس قفز سطر كامل ؟
آه صحيح : هنا عنصر خاص مهمته "الذهاب إلى السطر" !
هذه من العناصر أحادية (لا تحتاج عنصر بداية و عنصر نهاية) و التي مهمتها التنبيه انه يجب الذهاب إلى سطر جديد : <br/>. يجب أن تضعها بصفة إجبارية داخل الفقرة.
لاحظ كيف يتم استعمالها داخل الاكواد:
HTML: 
<!DOCTYPE html>
<html dir="rtl">
    <head>
        <meta charset="utf-8" />
        <title>الفقرات</title>
    </head>

    <body>
            <p>
            اهلا و سهلا في موقعي ! <br />
            هذه اول تجربة لي, لهذا يرجى التفهم, سأتعلم خطوة بخطوة كيف تسير هذه الامور.
            </p>
            
            <p>
            في الوقت الحالي قد تبدوا الامور غير جميلة, لكن مع الوقت سأتعلم امور جديد و اطور مهارتي, أأكد لكم اني سأفاجئكم دائما !
            </p>
    </body>
</html>

تستطيع نظرياًوضع العديد من عناصر<br/>للقيام بالعديد من عملية "إلى السطر", لكن سنعتبرها عادة سيئة ستشوه الاكواد. لأننا قد نستعمل لغة الـ CSS, هذه اللغة المكلمة و المنسقة للـ HTML , أتكلم حاليا عن المستقبل أن شاء الله.

الخلاصة
اعتقد الأمور سهلة و واضحة ؟
​

  • <p></p> : لتنظيم النص في فقرات.
  • <br/> : لذهاب إلى السطر.

الآن بما أنكم تعلمتم كيفية كتابة فقرات, سنرى كيفية إنشاء عناوين لهذه الفقرات. :)

hostk13055664572.png

​

العناوين
​

عندما يصبح في صفحتك العديد من الفقرات, سيصبح من الصعب على الزائر تحديد عن ماذا تتكلم . لهذا الشيء سنتعلم كيف ننشأ عناوين مختلفة.
في HTML هناك حل, لدينا إمكانية استعمال 6 مستويات من العنوانين مختلفة. لكي نصبح قادرين على تحديد العنوانين بقولنا "هذه العنوان شديد الأهمية", "هذا العنوان اقل أهمية", "هذا العنوان قليل أهمية", الخ. إذا لدينا 6 أنواع مختلفة هي :​

  • <h1></h1> : يعني "عنوان شديد الأهمية". بشكل عام, مثل الذي استعملته في عنوان الدرس الأول.
  • <h2></h2> : يعني "عنوان مهم".
  • <h3></h3> : نفس الشيء , هو عنوان اقل أهمية من سابقه (نستطيع القول أيضا "عنوان جانبي" إذا أدرتم).
  • <h4></h4>: عنوان أيضا اقل أهمية.
  • <h5></h5> : عنوان غير مهم.
  • <h6></h6> : في الحقيقة هو عنوان, لكن ليس لديه أي أهمية.


احذر : لا نستعمل العنصر<title> ! العنصر<title>يظهر عنوان كل الصفحةفي بارالعنوانعلى المتصفحكما شاهدنا سابقاً. العناوين<h1>شيء آخر, فهذا الأخير سيستعمل لإظهار و تكبير العنوان داخل الصفحة .


لا داعي لتأثر بعدد هذه العناصر. في الواقع, 6 مستويات لعناوين, كثير. خاصة من الناحية العملية, شخصيا, استعمل فقط العناصر <h1>, <h2>و <h3>, و بشكل نادر البقية (لن نكون بحاجة لكل المستويات دائم.


لا تختر لعنصرالعنواندالة حجم الخط ! يجب أن نبدأ بشكل منظم و منطقي بعنصر(<h1>), ثم العنوان المستوى 2(<h2>), الخ. من غير المنطقي أن يكون هناك قبل العنوان الرئيسي عنوان ثانوي ^^ !
إذا أدرت تعديل حجم خط العنوان, تستطيع فعل هذا لعلمك عندما تتعلم لغة الـ CSS في المستقبل إن شاء الله.


حاول الآن إنشاء صفحة جديد بواسطة كل المستويات العناوين :​
HTML: 
<html dir="rtl" >
    <head>
        <meta charset="utf-8" />
        <title>مستويات العنواين</title>
    </head>

    <body>
        <h1>عنوان شديد الأهمية</h1>
        <h2>عنوان مهم</h2>
        <h3>عنوان اقل اهمية (عنوان ثانوي)</h3>

        <h4>عنوان ليس كثير الاهمية</h4>
        <h5>عنوان غير مهم</h5>
        <h6>عنوان غير مهمة تماماً</h6>
    </body>
</html>
تجربة

الآن, سأعطيكم مثال جاهز مستعلم فيه 3 مستويات من العناوين) يجب الملاحظات أني استعملتها فقط في مواضيع العناوين ) :
HTML: 
<html dir="rtl">
<head>
    <meta charset="utf-8" />
    <title>تقديم موقع مدونات بلابلية</title>
</head>

<body>
    <h1>مرحباً بك في موقع مدونات بلابلية</h1>

    <p>
        السلام عليكم اخوتي في موقع : مدونات بلابلية.<br />
        مدونات بلابلية, ما مهمته ؟ 
    </p>

    <h2>تطوير و رفع مستوى مجتمع حرب القبائل</h2>
    
    <p>
        مدونات بلابلية يقوم بالعديد من النشاطات موجهة لرواد حرب القبائل :  شروحات و سكريبتات و مواقع احصائيات و مدونة و الكثير  من الأمور الحصرية !
    </p>
    <p>
        كذلك يقوم بتصحيح الأخطاء التي يراها, بدون اي مقابل او مردود مادي  قد يذكر, يعمل على بناء مجمتع قوي و غير جاهل, من كل النواحي!
    </p>

    <h2>مجتمع متكامل بحد ذاته</h2>
    
    <p>
        منذ تأسيس الموقع اي مايقارب سنة و نصف, و ادارين و أعضاء و حتى  أصدقاء الموقع لم  يتوقفوا عن تقديم الجديد و صنع الاحداث بالأعمال التي  تميز بها من مواقع و خدمات و مواضيع و دوات و حتى فديوهات و تصميمات<br  />
        يستمر بفضل الله الى تنفد كل الطاقة , الطاقة التي نستمدها من الأعضاء دائماً بتشجيعهم و دعمهم الدائماً.
    </p>
</body>
</html>
تجربة

هذه صفحة الويب بدأت تأخذ شكل نفتخر به ! ;)

شخص يسأل : نعم لكن أريد أن يكون العنوان في وسط الصفحة, و بلون أحمر و تحته سطر! :(


سنقوم بكل هذا إن شاء الله في حال وصلنا للغة الـ CSS. يجب معرفة أن <h1> لا يعني مثلاً نوع الخط "Times New Roman, و الحجم 16 pt", لكن يعني بكل بساطة انه "عنوان مهم". ثم تتدخل لغة CSS لتحدد شكل أهمية .


بواسطة لغة الـ CSS, سنستطيع القول للمتصفح"أريد كل عناوين المهمة في وسط الصفحة و بلون أحمر و تحتها سطر, ". في الوقت الحالي, في HTML, نقوم بتحديد أسس الصفحة. نقوم ببناء المحتوى قبل أن نقوم بتجميله و إعطائه أشكال مختلفة.​


hostk13055664572.png



تميز الكلمات المهمة
​

أثناء كتابة فقرة, هناك لبعض الكلمات قيمة أكثر من البقية و قد تود تميزها. HTML توفر عدة حلول لتميز الكلمات المهمة.​


خط مائل
لتميز كلمة بشكل مائل في فقرة, عليك استعمال العنصر التالي <em></em>.
طريقة استعمال سهلة جداً : قم بإحاطة الكلمة التي تود تميزها بهذه العنصرين, و سيتميز شكلها! سنجرب هذه على مثال سابق, لتميز بعض الكلمات فيه:
HTML: 
<html dir="rtl">
<head>
    <meta charset="utf-8" />
    <title>كلمة مائلة</title>
</head>

<body>
    <p>
        هذا موقعي و صفحتي الاولى !<br />

        هذه تجربتي الأولى, اذا <em>علي أن أتحلى بالصبر</em> لكي أنجه, سأتعلم خطوة خطوة كيف اصنع موقعي.
    </p>
</body>
</html>
تجربة

كما رأيتم في المثال, استعمال العنصر <emمثل ما يعرف بوضح الخط في وضعية "ايتاليك" في الواقع, المتصفح هو من يحدد كيفية عرض هذا العنصر. نحن اخبرناه بأن الكلمة المحددة أكثر اهمية من البقية, بهذا قام بتميز الكلمة بحسب النوع الذي طلبناه نحن.​


خط خشن
لجعل كلمة بخط خشن, سنستعمل العنصر <strong>الذي يعني "قوي", او "مهم" كما تشاؤون. يستعمل لنفس الطريقة تماما مثل ما استعملنا العنصر<em> :
HTML: 
<html dir="rtl">
<head>
    <meta charset="utf-8" />
    <title>خط خشن</title>
</head>

<body>
    <p>
        هذا موقعي و صفحتي الاولى !<br />

        هذه تجربتي الأولى, اذا <strong>علي أن أتحلى بالصبر</strong> لكي أنجه, سأتعلم خطوة خطوة كيف اصنع موقعي.
    </p>
</body>
</html>
تجربة

رأيت حتما أن الكلمة المحددة تم عرضها بشكل خشن. نفس الشيء, الخط الخش هو نتيجة . المتصفح اختار ان يعرض ان النص بشكل خشن حسب ما طلبنا.

العنصر <strong> لا يعني بالضرورة "خط خشن" يعني "مهم". نستطيع جعل هذا العنصر بواسطة لغلة الـ CSS يعرض الكلمات "المهمة" بشكل أخرى كما نشاء.


تحديد و تلوين خط
العنصر <mark> يسمح بتلوين جزء من الفقرة . لا يعني بالضرورة انه مهم لكن يجعله مميز عن البقية. هذا النوع من العناصر يستعمل مثلا عن إجراء بحث عن كلمة داخل موقع , بحيث يقوم بتحديد النتائج بألوان يسمح تميزها .
HTML: 
<html dir="rtl">
<head>
    <meta charset="utf-8" />
    <title>تحديد كلمة</title>
</head>

<body>
    <p>
        هذا موقعي و صفحتي الاولى !<br />

        هذه تجربتي الأولى, اذا <mark>علي أن أتحلى بالصبر</mark> لكي أنجه, سأتعلم خطوة خطوة كيف اصنع موقعي.
    </p>
</body>
</html>
تجربة

في الشكل الافتراضي, <mark>يقوم بعمل تأثير على الكلمة المحددة. نستطيع التحكم في نوع التأثير بواسطة لغة الـ CSS ( تغير اللون الذي يحدد به, عمل إطار على الكلمة المحددة, الخ.). بنفس مبدأ الذي تكلمنا عن على العناصر السابقة : تقوم بتحديد بأنها مهمة لكن ليس بالضرورة كيف هي مهمة.


لا ننسى ان : HTML لبناء الصفحة , CSS لمظهر الصفحة
قد يبدوا الأمر غير واضح حالياً لكن من مهم جداً فهم هذه النقطة, لان الكثير في بداية الأمر يأخذون مبادئ خاطئة . يقولون عن هذه العناصر <em>, <strong>, <mark>... انها : "سهلة, لقد تعلمنا كيف نقوم بخط مائل و خط خشن و خط ملون بواسطة لغة, HTML !".

في الحقيقة... ليس هذه المهمة الحقيقة او المفهوم الحقيقة للعنصر ! اعلم, قد تقولون "عندما نستعمل العنصر<strong> النص يصبح بخط خشن, اذا العنصر هذا مصنوع للكتابة بخص خشن.", في الحقيقة, من الخطأ ان تفهم ان العنصر مصنوع لهذا الشيء فقط.

مهمة العنصر هي تميز النص. نفس الشيء, <strong> يبين لبرنامج التصفح "هذا النص مهم جداً". المهم هي ان نبين ان هذا النص مهم جداً, لهذا ردت فعل برنامج التصفح الافتراضية ان يميزه بخط خشن (كذلك يمكن ان يلونه بلون أحمر !). معضم برامج المتصفح الحالية تقوم باضهار هذا العنصر بخط خشن, لكن لاشيء يجبر على هذا


لكن الآن, كيف نحول مثلا أهمية النص من الخط الخشن الى الخط أحمر؟ :confused:


هذا الشيء يعتمد على لغة الـ CSS. تذكر :​

  • الـ HTML لبناء الصفحة (المحتوى, الفقرات القائمة)
  • الـ CSS تقوم بتحديد المظهر

سنرى لغة الـ CSS لاحقاً في الوقت الحالي سنركز على لغة الـ HTML و عناصرها, و دور كل واحد منها. ;)


هناك شيء نقاص في ما بقى لهذا سأقوم باضافته الرد التالي في اقرب وقت :)
​
​
 

DeletedUser4248

Guest
قائمة بواسطة مطات
القائمة بواسطة مطات تسمح لنا دائما بتنظيم الفقرات و الافكار بشكل جيد و واضح.
سنكتشف إن شاء الله نوعين من القائمات ​

  • القائمة غير مرتبة(عادية)
  • قائمة مرقمة


القائمة غير مرتبة (عادية)
قائمة غير مرتبة تشبه هذه القائمة​

  • الرمح
  • سيف
  • سهم
هو نظام يسمح لنا بانشاء قائمة, بدون شيء يرتبها (لا توجد المطة "الأولى" و لا توجد المطة "الأخيرة"). انشاء قائمة بهذا الشكل بسيط جداً. يكفي استعمال العنصر <ul> الذي يغلق بعيد نواعا ما بالعنصر </ul>.
في البادية نبدأ بكتابة :
HTML: 
<ul></ul>

بعدها, نقوم بالتالي : سنكتب كل مطة او عنصر داخل العنصرين <li></li>. و كل هذه العناصر و المطات نكتبها داخل <ul> و </ul>. ستفهم أكثر في هذا المثال ان شاء الله :

HTML: 
<ul>
 <li>رمح</li>      
<li>سيف</li> 
     <li>سهم</li> 
    </ul>
تجربة

كما يجدر التنبيه ان العناصر التي تنشأ لنا القائمة يجب ان تكون داخل العنصرين <body></body>. من الآن فصاعداً سأكتب فقط الاكواد التي تمهنا لا داعي لنسخ كامل الصفحة كل مرة.​
احفظ هذه العناصر لتستعملها حين تود انشاء قائمة :​

  • <ul></ul> محاطة بكل القائمة.
  • <li></li> محاطة بنعصر واحدة فقط من القائمة (مطة).
[FONT=&quot]تستطيع انشاء الكثر من العناصر و المطات في القائمة الواحدة لست محدود بالثلاثة او أي عدد معين.

[/FONT]
جيد , هاقد قمت بانشاء قائمة عادية ! ليس شيء صعب بمجرد تفهم كيفية تعمل العناصر.

​
لمن يود انشاء قائمة معقدة , تستطيع ان شاء قائمة داخل قائمة اذا اردت القيام بهذا قم بوضع عنصر <ul> داخل العنصر او المطة <li></li>.
اذا قمت باغلاق العنصر بالترتيب الجيد, لن تكون لديك اي مشكلة. احذر , هذه الطريقة صعبة اتقان نوعا ما.


​
قائمة مرقمة

قائمة مرقمة تعمل بنفس مبدأ القائمة السابقة , هناك عنصر واحد يتغير : حيث يجب تغير <ul></ul> بـ <ol></ol>.
داخل القائمة, لن بتغير الكثير : نستعمل دائما <li></li> لحد المطة الواحدة.

​
طريقة ترتيبك للعناصر سيكون لديه أهمية. حيث الأول <li></li> سيكون الرقم1, الثاني سيكون رقم 2 الخ...​


المثال :​
HTML: 
<ol>     
<li>كشافة</li> 
    <li>خفيف</li> 
    <li>ثقيل</li>
 </ol>
بمشاهدة المثال السابقة , كل ما قمنا بتغير هو العنصر <ol>.

للمعلوماتية , هناك نوع ثلاث من القاوائم, ناد جداً : قائمة التعاريف. تقوم باستعمال العنصر <dl> (للاحاطة بالقائمة), <dd> (للاحاطة بالعنصر) et <dt> (للاحاطة بالتعريف الخاصة بالعنصر).

أسألة
​

فقرة يجب ان تكون محاطة بالعنصر...​

  • <q> </q>
  • <p> </p>
  • <فقرة> </فقرة>
أي من العناصر يسمح بالانتقال لسطر جديد داخل الفقرة ?​

  • <br />
  • <سطر />
  • <br>
من بين هذه الناوين من هي أكثر اهمية ?​

  • <h4>
  • <h5>
  • <h6>
العنصر<strong>يعني... ​

  • النص مهم
  • النص خشن
  • النص مائل
ما هو العنصر الذي يحدد مطة واحدة داخل القائمة ؟​

  • <ul>
  • <ol>
  • <li>

هذا الدرس قد يكون اكثر جدية من سابقيه , لكن من الضروري الدخول في صلب اللغة !

اعرف انه هناك عناصر يجب تذكرها لكن يجب التأكد انها مهمة . بشكل خاص , في المستقبل ان شاء الله لن تقوم بأي جهد لتذكر هذه العناصر.

اذا تجد شيء عالي , لا تقلق . لا يوجد من يجبرك على حفظ العناصر بالقلب. يمكن دائما الرجوع دائما لهذا الدرس لتذكرها.

حتى محترفين البرمجة لا يحفظون جميع عناصر الـ HTML عن ظهر قلب. ان شاء الله مع الوقت و كثرة الاستعمال يتنقش بشكل طبيعي في رأسك
​

الى هنا نهني درسنا , و أعدكم بدرس أخر سيكون بداية رابط الصفحات و تشكيل الموقع

و ان شاء الله يندخل درس ممتع جداً
هو درس الروابط , بحيث كيف تربط بين صفحاتك و يصير عندك موقع ان شاء الله
 

DeletedUser4248

Guest
mensh300 قال:
هل تستخدم هذه اللغه فى صناعه السيكربتتات؟​
أنقر للتوسيع...
تستعمل هذه في كل شيء
اذا كانت الجافا سكريبت تقول بالوضائف و تحسب المتغيرات و تميز الجمل الشرطية
فهذه اللغة هي من تقوم باضهار النتائج في جدول
الجدول ذلك يجب رسمه بواسطة هذه اللغة , كذلك اذا أردت تحديد نتيجة معية لخط خشن فهذه اللغة من تقوم بهذا , اذا اردت عرض النتائج في قائمة مرقمة مثلا فهذه اللغة تقوم بهذا
 

DeletedUser

Guest
صراحة يا عبدو شيء جدا رائع
أول ما أرجع إنرشاء الله أحاول
 

DeletedUser23328

Guest
شرح أكثر من رائعة
مشكور :)

جاري اعادة القراءة وتجربة الأكواد
 

DeletedUser

Guest
والله شرح مبدع فيه

شكراً عبود

لاكن عندي سأل رابط الصفحة كيف اغيره
 

DeletedUser4248

Guest
killer kings قال:
والله شرح مبدع فيه

شكراً عبود

لاكن عندي سأل رابط الصفحة كيف اغيره
أنقر للتوسيع...
هلا اخي
رابط اي صفحة يعبر عن مكانها
فتغير الرابط يعتمد على تغير مكان تلك الصفحة

اي صفحة تود تغيير رابطها ؟
 

DeletedUser20096

Guest
تسلم اخوي وماقصرت و بكل صراحه الموضوع عجيب للغايه و رائع ^_^

تسلم يدك و الله يخليك ولا يضيع لك تعب و بالتوفيق يالغالي

تقبل ودي و احترامي
 

DeletedUser

Guest
شكرا عبدو .. جارى التطبيق بس الاول نراجع الدورس اللى فاتت واشكرك على المجهود :)
 

DeletedUser23328

Guest
بخصوص تلوين الخط ..
كيف اقدر ألون الخط فقط دون ان الون مربع كله يحيط به
 

DeletedUser4248

Guest
-FaTaL- قال:
بخصوص تلوين الخط ..
كيف اقدر ألون الخط فقط دون ان الون مربع كله يحيط به
أنقر للتوسيع...

هذا له علاقة بلغة الـCSS
قم باحاطة الكلمة المهمة بهذا الكود
HTML: 
<span style="color:#333333" >اكتب هنا الكلمة او الجملة</span>
الكود '#333333' يعبر عن لون رمادي
 
يجب عليك تسجيل الدخول أو التسجيل للرد هنا.
أعلى