أريد أن افهم .... ماذا تعنون بالاكواد

عدد المساهمات : 1110 تاريخ التسجيل : 26/04/2008

" بسم الله الرحمن الرحيم "

أولا تعريف 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
ثالثاً : Java script

الجافا سكربت هي : لغة برمجة مهمتها المساعدة في بناء المواقع و إعطاء بعض الحيوية لصفحات الويب مثل الساعات و القوائم و أشياء أخرى متنوعة , و هي من تطوير شركة NETscape

ملاحظة : لا ترهق صفحتك بالكثير من أكواد الجافا و ذلك لضمان ظهور صفحتك بشكل صحيح و حتى لا ينفر منها الزائر , و ستجد هنا أكواد مفيدة أخرى بغير لغة الجافا سكربت تم اضافتها للإفادة.
__________

القواعد النحوية للـ 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

}

تجميع

عدد المساهمات : 1110 تاريخ التسجيل : 26/04/2008

تستطيع تجميع المقاطع وتفصل بين كل مقطع بفاصله (,) , في هذا المثال اسفل قمنا بتجميع كل عناصر الرأس (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
}

شكرأ لكم .. ومع دروس قادمة بإذن الله

عدد المساهمات : 41 تاريخ التسجيل : 28/04/2008

الف شكر لك يا اخي

عدد المساهمات : 51 تاريخ التسجيل : 30/12/2008

بارك الله فيك