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

أولا تعريف 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


}