منتديات كاس العالم الترفيهيه

اختار لغه المنتدى

اربط حزام الامام و اضغط

منتديات كاس العالم الترفيهيه

انت الزائر رقم؟

عدد زوار المنتدى

زوار المنتدى

المواضيع الأخيرة

» واجهات مجانيه للشات الكتابي و الصوتي
الأربعاء أغسطس 01, 2012 2:32 am من طرف الصقر

» حركات خطيره لكرة القدم بلاي ستيشن 2
الثلاثاء نوفمبر 15, 2011 6:34 pm من طرف AHMMED

» الان حصريا كود لعبه بلياردو اون لاين
الأحد أغسطس 21, 2011 1:56 pm من طرف Mr_King

» رتب و نجوم الاعضاء و المشرفين
السبت يوليو 02, 2011 9:07 pm من طرف غوغو

» شرح كيفية اضافة موقعك الى ( msn ( bing وجلب روبوتاته الى منتداك ! بالشرح المفصل !
الأحد مايو 15, 2011 5:50 am من طرف حرائر السامر

» احدث كود العاب فلاشية لموقعك 2010 متجدد + مجانا
الإثنين مايو 09, 2011 3:26 am من طرف مهدي العكيلي

» كود لعبه من سيربح المليون (حصريا)
الإثنين مايو 09, 2011 3:25 am من طرف مهدي العكيلي

» استايل لمركز التحميل كليجا
الخميس مارس 03, 2011 9:23 pm من طرف Admin

» كود محرك نشر المواضيع
الخميس مارس 03, 2011 8:28 pm من طرف Admin

راديو روتانا

 

    تعريف ال HTML + CSS + درس في ال CSS

    شاطر
    avatar
    Admin
    المدير العام
    المدير العام


    عدد المساهمات : 431
    نقاط : 881
    السٌّمعَة : 0
    تاريخ التسجيل : 07/11/2010
    العمر : 30

    تعريف ال HTML + CSS + درس في ال CSS

    مُساهمة من طرف Admin في الجمعة فبراير 18, 2011 2:05 pm


    أولا تعريف html


    ال HTML هي لغة البرمجة الأساسية التي تعمل من خلالها الانترنت و تمكنك من بناء المواقع. ان لغة ال HTML تمكن المستخدم من ربط الصور، الكتابة، الموسيقى و الروابط في صفحة واحدة و تربط الصفحات ببعضها البعض. ان ملفات ال HTML هي ملفات بسيطة يمكن فحصها و تشغيلها في اي جهاز حاسوب و على اي نظام تشغيل. تتكون لغة ال HTML من مجموعة الأوامر ( Tags ) التي تمكنك من ادخال المكونات في الصفحة (كتابة، صور، روابط، موسيقى، جداول،...) و مجموعة الخصائص (Attributes) و التي تتحكم في شكل الصفحة (اللون، شكل الخط، لونه، حجمه، صورة الخلفية و لونها،...). ان برنامج متصفح الانترنت ( Internet Explorer ) يدعم لغة ال HTML و لا داعي لوجود برنامج خاص لها. و من ثم يتم فتح الملف عن طريق متصفح الانترنت ( Internet Explorer ).

    وأيضا


    لغة HTML هي اختصار لجملة (Hyper Text Markup Language )، وقد صُـنِـعَـت لعرض المعلومات والروابط في صفحة الإنترنت.
    وتقوم هذه اللغة بوصف وهيكلة المحتويات بشكل وتنسيق مناسبين، وذلك من خلال الـTAGS الخاصة بها لتظهر لنا بالشكل الذي نراه في صفحات الويب، فهي إذاً ليست لغة برمجة كما يظن البعض.

    ولقد صُـنِـعَـت هذه اللغة من قبل مخترع الويب (Tim Berners-Lee)، ثم طُـوِّرت من قبل منظمة (IETF)، والآن أصبحت منظمة الويب العالمية (W3C) هي الراعية لهذه اللغة والمسؤولة عنها.



    ثانيا تعريف ال CSS


    ماذا نقصد بـ Css ؟

    هي اختصار لـ Cascading Style Sheets

    وهي تعني : صفحات الأنماط المتعاقبة

    ونستطيع بأستخدام هذه التقنيه فصل تنسيق الصفحة عن محتواها

    اي نقوم بأرفاق جمل الـ CSS لنستطيع عرض عناصر الـ html بالتنسيق الذي نريد

    قبل البدء يجب انت تعلم على الأقل القواعد الأساسية لأستخدام الـ html\xhtml



    ثالثا درس في قواعد ال CSS


    القواعد النحوية


    كود:
    الكود:


    القواعد النحوية للـ css تحتوي على ثلاث اجزاء : المقطع(selector) , الخاصية(property ) , القيمة(value) :




    selector {property: value}




    المقطع عادةً هي عنصر/وسم الذي تريد تعريفه , الخاصية هي الوصف الذي تريد تغيره , وكل خاصية تستطيع أخذ قيمة .


    الخاصية والقيمة منفصلة بواسطة : ومحاطه بأقواس {}




    body {color: black}






    ملاحظة: اذا كانت القيمة كلمات متعدد ضع علامة تنصيص حول القيمة




    p {font-family: “sans serif”}


    ملاحظة: اذا كنت تريد تحديد اكثر من خاصية واحدة , يجب عليك ان تفصل كل خاصية بفاصلة منقوطة (;)


    المثال في الأسفل يعرض كيفية تعريف فقرة متوسطه , ولون النص احمر




    p {text-align:center;color:red}




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






    p


    {


    text-align: center;


    color: black;


    font-family: arial


    }


    تجميع




    تستطيع تجميع المقاطع وتفصل بين كل مقطع بفاصله (,) , في هذا المثال اسفل قمنا بتجميع كل عناصر الرأس (header ) . كل عناصر الرأوس اصبحت ظاهرة في لون أخضر




    h1,h2,h3,h4,h5,h6


    {


    color: green


    }






    تصنيف المقاطع




    مع تصنيف المقاطع تستطيع تعريف انماط مختلفه في نفس النوع من عناصر الـ HTML




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




    p.right {text-align: right}


    p.center {text-align: center}




    انت استخدمت تصنيف الخواص في مستند الـ html


    <p class=”right”>


    This paragraph will be right-aligned.


    </p>




    <p class=”center”>


    This paragraph will be center-aligned.


    </p>




    ملاحظة: لتطبق اكثر من تصنيف لكل عنصر معطى , القاعده هي :




    <p class=”center bold”>


    This is a paragraph.


    </p>


    الفقرة في الأعلى سوف تصمم بواسطة تصنيف “center” وسط و “bold” ثقيل.


    انت تستطيع ايضاً ان تحذف وسم الأسم (name) في المقطع لتعريف النمط الذي سوف يستخدم في كل عناصر الـ HTML التي لها مركز التصنيف .


    في المثال الأسفل . كل عناصر الـ HTML مع


    class=”center”


    سوف تصبح في الوسط:




    .center {text-align: center}






    في الكود الاسفل كلاً من عنصر h1 و عنصر p تحتوي على


    class=”center”


    هذا يعني كلاً من العناصر تتبع القواعد في المقطع


    “.center:”






    <h1 class=”center”>


    This heading will be center-aligned


    </h1>




    <p class=”center”>


    This paragraph will also be center-aligned.


    </p>




    ! لا تبدء بتصنيف الأسم مع الرقم ! انها لاتعمل في Mozilla/Firefox.






    اضافة الأنماط الى العناصر مع خواص معينه






    تستطيع ايضاً تطبيق انماط على عناصر الـ HTML مع خواص معينه . قواعد النمط في الاسفل تربط كل عناصر الادخال التي تحتوي على انواع معينه في قيمة النص “text“:


    input[type=”text”] {background-color: blue}




    هوية المقاطع (The id Selector)




    تستطيع ايضاً تعريف انماط لعناصر الـ HTML مع هوية المقطع . هوية المقطع تعرف بواسطة #.


    قواعد النمط في الاسفل تربط العناصر التي تحتوي على هوية معينه مع قيمة “green“:




    #green {color: green}


    قواعد النمط في الاسفل تربط عنصر p الذي يحوي هويه مع القيمة للـ “para1“:






    p#para1


    {


    text-align: center;


    color: red


    }


    ! لاتبدء بهوية الاسم مع الرقم ! انها لاتعمل في Mozilla/Firefox.




    التعليقات في الـ css


    التعليقات تستخدم لتوضيح شفرتك (your code) و يمكن ان تساعدك عندما تقوم مستقبلاً بتحرير مصدر الشفرة في البيانات . التعليقات لاتظهر في المتصفحات. في الـ css التعليقات تبدء بـ “/*” وتنتهي بـ “*/”


    كالتالي :


    /* This is a comment */


    p


    {


    text-align: center;


    /* This is another comment */


    color: black;


    font-family: arial


    }






    _________________

      الوقت/التاريخ الآن هو الخميس أبريل 26, 2018 3:49 am