مدرسة الويب web school

مقدمة فى لغة CSS

معنى CSS

CSS هى اختصار لعبارة cascading style sheet وتعنى صفحة الانماط الانسيابية

وظيفة CSS

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

كيفية كتابة كود CSS

يتم كتابة كود CSS على هيئة selector وهو العنصر الذى نريد تطبيق التنسيق عليه وقد يكون فقرة P أو body أو جدول table أو عنوان H1 أو غير ذلك من عناصر لغة Html المتعددة ثم أقواس لغة CSS {} بداخل هذه الأقواس نكتب الخاصية والقيمة الخاصة بها وproperty هى الخاصية الخاصة بهذا العنصر مثل اللون color ، أو حجم الخط font-size أو غير ذلك.
مثلا

selector

}

property: value

{

وهذا السطر property: value يسمى إعلان ويتم الفصل بين كل إعلان واخر بالفاصلة المنقوطة ; semi colon

ويمكن وضع كود CSS بإحدى ثلاثة طرق

إما فى ملف خارجي external file ويتم وضع رابط لهذا الملف فى وسم Head

كود Html

صفحة css وبها الأكواد واسم الصفحة mystyle.css

شكل صفحة الويب على المتصفح

وبالطبع يمكن كتابة أكثر من اعلان خاص بهذه الفقرة مثل حجم الخط font-size ونوع الخط font-family

النوع الثاني:

داخل وسم Head وتسمى internal style

<head>

<style>

{

color:blue;

font-size:40px;

}

</style>

</head>

كود css داخل وسم Head

شكل الصفحة كما تظهر فى متصفح الويب

الطريقة الثالثة:

داخل العنصر نفسه وتسمى Inline Style:

شرح العناصر file- fieldset- legend -select من عناصر النموذج form فى لغة Html

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

شرح العنصر file من عناصر النموذج form فى لغة Html

فنلاحظ ظهور وسم file بهذا الشكل فى المتصفح وعند الضغط عليه يتم فتح متصفح ويمكن عن طريقة تحديد أى ملف أو صورة أو مستند لرفعه على صفحة الويب

<fieldset>

احد العناصر الهامة من عناصر النموذج form ووظيفة هذا العنصر هو وضع مربع أو صندوق أو إطار حول عناصر النموذج form كما هو موضح بالمثال ونلاحظ أنه يوجد وسم بداية ووسم إغلاق .

شكل fieldset فى المتصفح قام بوضع اطار حول العناصر التى نريد وضع اطار حولها من عناصر النموذج form

< legned>

ووظيفته يقوم بوضع عنوان لعنصر fieldset ويكون مكانه بعد وسم fieldset

شكل legend فى المتصفح .

أحد العناصر الهامة من عناصر form ووظيفتها تقوم بانشاء قائمة منسدلة ونضع عناصر هذه القائمة بين وسمى

إنشاء قائمة باستخدام select فى النموذج form فى لغة Html

شكل القائمة select كما ستظهر فى المتصفح

من الخصائص الهامة للعنصر select الخاصية Multiple وهى تعمل على اختيار أكثر من عنصر من عناصر القائمة

الخاصية multiple كما تظهر فى المتصفح حيث يمكن تحديد أكثر من عنصر من عناصر القائمة

الخاصية disabled وهى تعنى عدم تمكين الوصول إلى عناصر القائمة

الخاصية disabled كما تظهر فى المتصفح

radio button in html شرح

فى هذا الدرس سنقوم بشرح أحد عنصر النموذج form وهو radio
ووظيفة هذا العنصر هو امكانية اختيار عنصر واحد فقط من متعدد
ويكمن الاختلاف بينها وبين checkbox أن radio يمكن اختيار عنصر واحد فقط عند الاختيار منها بينما checkbox يمكن اختيار أكثر من عنصر عند الاختيار منها.

لإنشاء زر radio نكتب الوسم

<input type="radio">

نلاحظ أنه تم إنشاء زر radio كما هو موضح بالشكل

الزر radio له العديد من الخواص attributes منها Name -value

ملحوظة : الخاصية value لا تظهر للمستخدم وإنما سيتم إرسالها إلى الخادم مرتبطة مع الاسم Name

الخاصية : Name لها اهمية كبرى في معرفة المجموعة التى ينتمى لها الزر حيث أنه يمكن أن يكون لدينا أكثر من مجموعة ولكل مجموعة اسم مميز وجميع أزرار المجموعة ينبغى أن يكون لهم نفس الاسم.

نلاحظ أنه لدينا مجموعتان من أزار الاختيار المجموعة الأولى خاصة بالنوع وهنا نلاحظ أن أزرار هذه المجموعة لها نفس الاسم gender ومجموعة أخرى من أزرار الاختيار خاصة بالدولة وهنا نلاحظ أن جميع عناصر المجموعة الثانية لهم جميعا نفس الاسم country.

الخاصية checked ووظيفتها تفعيل أحد الأزار افتراضيا

نلاحظ أنه تم افتراضيا تفعيل الزر male

شرح عنصر textarea في نموذج بيانات form بلغة Html الجزء الثالث

تحدثنا فى الدروس السابقة عن إنشاء نموذج بيانات بلغة Html ويمكنك الرجوع للدرس الأول عن طريق الضغط على هذا الرابط ..اضغط هنا ويمكنك الرجوع الى الدرس الثانى فى إنشاء نموذج بيانات بلغة Html عن طريق الضغط على الرابط التالي ..اضغط هنا
وفى هذا الدرس سنكمل بمشيئة الله تعالى عناصر النموذج form بلغة Html

text area

وهذا العنصر يمكن من خلاله كتابة تعليقات او ملاحظات بحيث يمكن إرسالها مع النموذج form بلغة Html وهذا العنصر له وسمى بداية وإغلاقة

ويظهر النموذج فى المتصفح بهذا الشكل

ولtextarea بعض attributes او الخصائص منها rows عدد الصفوف التى تظهر فيها وأيضا عدد الأعمدة cols التى تظهر

ونلاحظ أنه سوف تظهر textarea بهذا الشكل فى المتصفح بعد أن تم التحكم فى عدد الصفوف التى نريد أن تظهر بها وعدد الأعمدة التى نريد لها الظهور فيها.

ويمكن إضافة نص ابتدائي معين يظهر فى textarea وذلك بكتابة النص الذى نريد أن يظهر فى النموذج بين وسمى الفتح والإغلاق <textarea>ويمكن حذف هذا النص من المستخدم عن ملء النموذج.

شكل النص الذى كتبناه يظهر فى عنصر textarea بالمتصفح

خاصية readonly من ضمن خصائص textarea وتعنى هذه الخاصة للقراءة فقط بحيث يكون الكلام المكتوب بين وسمى الفتح والإغلاق فى textarea قابل للقراءة فقط ولا يمكن تعديله أو الكتابة عليه أو مسحه

نلاحظ أنه لا يمكن تعديل كلمة "enter your message here " أو تبديلها أو الكتابة عليها لأنها للقراءة فقط

الخاصية Disabled هذه الخاصية تعمل على عدم تمكين الوصول لـ textarea

كما نلاحظ انه لا يمكن الوصول إلى textarea لأن لها الخاصية disabled

الصفحات