منتديات جنة الدنيا | شبكة جنة الدنيا
انت لسه مسجلتش ده احنا عايزينك وسطنا و مستنينك من زمان يا مان
انت لسه مسجلتيش كل ده تاخير يلا انضمي لينا و شجعينا نجيب اجوان
منتديات جنة الدنيا | شبكة جنة الدنيا
انت لسه مسجلتش ده احنا عايزينك وسطنا و مستنينك من زمان يا مان
انت لسه مسجلتيش كل ده تاخير يلا انضمي لينا و شجعينا نجيب اجوان
آخر المواضيع
الموضوع
تاريخ ارسال المشاركة
بواسطة
عيادات ايبلا لطب وتجميل الاسنان
عيادات ايبلا لطب وتجميل الاسنان
محرك بحث العراق Google Iraq
كتاب معجزات الشفاء فى منتجات النحل(الكتاب كامل)
قصة قارون
قصة طالوت و جالوت
قصة الخضر عليه السلام
بقرة بني اسرائيل
قصة قبيل و هابيل
قصة هاروت و ماروت
الخميس يوليو 12, 2012 3:49 am
الخميس يوليو 12, 2012 1:45 am
السبت يونيو 23, 2012 9:36 pm
الخميس يونيو 14, 2012 3:46 am
الإثنين أبريل 16, 2012 12:09 pm
الخميس مارس 15, 2012 12:00 pm
الخميس مارس 15, 2012 9:15 am
الخميس مارس 15, 2012 9:11 am
الخميس مارس 15, 2012 9:08 am
الخميس مارس 15, 2012 9:05 am











منتديات جنة الدنيا | شبكة جنة الدنيا

الرئيسيةشبكة جنة الدنياأحدث الصورالتسجيلدخول

شاطر | 
 

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

استعرض الموضوع التالي استعرض الموضوع السابق اذهب الى الأسفل 
كاتب الموضوعرسالة
Red_Dragon
المدير
المدير
Red_Dragon

ذكر
الميزان التِنِّين
عدد المساهمات : 3941
نقاط : 9992
السٌّمعَة : 0
العمر : 36
الموقع : http://www.helmelworod.com
الدولة : مصر

وسام 1 : تعريف ال HTML + CSS + درس في ال CSS A2

تعريف ال HTML + CSS + درس في ال CSS Empty
مُساهمةموضوع: تعريف ال HTML + CSS + درس في ال CSS   تعريف ال HTML + CSS + درس في ال CSS Emptyالأربعاء أكتوبر 26, 2011 9:45 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”}


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


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




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


}





شكرأ لكم ..

أرجو النقل للـ س و ج


وأرجو أن تكونوا قد استفدتم بالدروس البسيطة
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.helmelworod.com
 

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

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة 
ahmed
صفحة 1 من اصل 1

 مواضيع مماثلة

-
» موقعين لتغير أنواع الأكواد من [ BBCode To HTML ] و [ HTML To BBCode ] حصرياً !!
» تعريف التفسير وأهميته:
» اللود (استهلاك الموارد) تعريف ،اسبابه ، حلول ،ارشادات
» درس في HTML للمبتدئين
» صفحات HTML

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات جنة الدنيا | شبكة جنة الدنيا :: التعليم الالكتروني | Electronic school :: دورة تعليمية لمنتديات احلى منتدى | Ahlamontada forum trainer-
free counters


Powered by Ahlamontada® Version 1.2
استايل رمضان Copyright ©2011 - 2012, helmelworod.com
Enterprises Ltd. helmelworod Network


©phpBB | منتدى مجاني | منتدى مجاني للدعم و المساعدة | التبليغ عن محتوى مخالف | ملفات تعريف الارتباط التابعة لجهات خارجية | آخر المواضيع
التعليم الالكتروني | وردة محتارة