لمن يعشق لغة html

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

لمن يعشق لغة html

مُساهمة من طرف kamal-amazighe في السبت 19 أبريل - 16:06

معلومات} مهمة في لغة Html
--------------------------------------------------------------------------------

السلام عليكم ورحمة الله وبركاتة
كيف الحال اخواني ان شاء الله بخير

ستكون اول دروسنا في هذه الدورة بتعلم بعض المفاهيم الخاصة بلغة الـ HTML

حتى يسهل علينا التعامل معها عندما نحتاجها في لغة الـPhp وذلك لتداخلها الكبير معها

ما رايكم ان نبدا الان ..

بسم الله

اولا قم بفتح اي محرر نصوص ويفضل الفرونت بيج

وقم بمتابعة الشرح مع كتابة ما هو مخصص في هذا الدرس كما هو موضح بالصورة



لاحظ الصورة السابقة قمنا بكتابة الاكواد ما بين الوسوم

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

ولمن لا يملك الفرونت بيج يقوم بتجربة كل الاكواد في اي محرر نصوص ويحفظها بأمتداد
.html وبعدها يقوم بفتحها عن طريق المتصفح ليرى نتيجة عملة

الـ html هي لغة مخصصة بتصميم مواقع الانترنت وهي تحتوي على tags او الوسوم

يبدا بأشارة اصغر وينتهي بأشارة اكبر

هذا هو الوسم او التاج < > ويوضع بداخله كود برمجي
رمز Code:
< >
وبداخلة يوضع الكود البرمجي وتتكون نهايته من التالي

رمز Code:


وتكون التاجات(tag) مكونة من name و attributs

لنذهب الان لنرى اهم مجموعة من التاجز

1-Font Formating

رمز Code:

رمز Code:
أ-

هنا توضع الفقرة المرادة


وهي لوضع جمل مع بعضها البعض في مكان محدد

رمز Code:
ب- hello! وهي لجعل الخط غامق
رمز Code:
ج- hello!
وهذه لوضع خط اسفل الكلمة المراده

رمز Code:
د- hello! وهي لجعل الكلام بشكل مائل

انتهينا من مرحلة الـ Fonts ولنتقدم قليلا لنصل لمرحلة الـ Links او الروابط

2- Html Links

أ- احيانا تكون صفحاتنا طويلة جدا بحيث يصبح من الضروري وضع نقطة بداية للصفحة

وعند كل فقرة نضع نقطة لأرجاعنا لهذه البداية ويتم ذلك عن طريق

رمز Code:
أ- top

يجب ان يكونو بنفس الصفحة

رمز Code:
بداية
لنقم الان بشرح ما سبق لاحظ في البداية قمنا بكتابة href وهذه لتخبر المتصفح بأن المطلوب رابط

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

بداية وينقلنا منها الى اعلى الصفحة

ب- لنفرض بأن لديك صفحة (profile.html) وتريد ان تضع لها رابط بأي صفحة اخرى
ما عليك سوا اتباع التالي

لتعرف الطريقة
رمز Code:
من نحن
وسيقوم المتصفح بفتح الصفحة الجديد في نفس الصفحة الرئيسية

ولكن اذا اردت ان تقوم بفتح صفحة جديدة فأكتب الكود التالي

جـ- رمز Code:
من نحن
الـ attribut الذي قمنا بكتابته مختص بفتح صفحات جديدة من الروابط ويمكنك ايضا

ان تفتح الصفحة بنفس المتصفح عن طريق كتابة مثلا taget=_self

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

رمز Code:
yahoo
هـ- هذا الكود اذا اردت وضع ايميل بمجرد الضغط على الزر ينتقل الى out look

رمز Code:
yahoo
لاحظ بأنه عندما كتبنا كلمة subject قمنا بكتابة علامة استفهام قبلها ولم نقم بفتح كوتيشن مارك " هذه الكوتيشن مارك " لها

الان انتهينا من الروابط والايميلات وسننتقل لأهم ما في الـ HTML وهو

3- HTML Tables

تتكون الجداول من ثلاث تاجات رئيسية وهي

رمز Code:

هذا التاج مختص في فتح الجدول وله attributs خاصة وكثيرة

متخصص في فتح الصفوف وله ايضا attributs

متخصص في فتح الاعمدة وله ايضا مثل السابق

لنبني معا جدولا صغيرا بدون اي خصائص ولنرى ماذا سيرسم لدينا

رمز Code:


















1 2 3
4 5 6
7 8 9

لو وضعت هذا الكود في note pad وقمة بتشغيلة في المتصفح سيظهر لك الارقام مرتبة

بشكل جدول منظم ومنسق

لنقم الان بالانتقال الى خواص الجدول (attributs)

رمز Code:



الكثير من الخواص اليس كذلك ؟؟

لا يهم لنأتي الان لشرحها بالتفصيل

border وهو خاص بسماكة الحدود

width خاص بعرض الجدول ويمكن كتابته اما بالنسبة او بالبكسيل
اذا كانت نسبة يجب وضع اشارة % قبل الرقم واذا كان بيكسل يوضع الرقم لوحدة

وكذلك الحال في ال hieght ولكن عملة هو الطول

bordercolor وهو كود خاص بلون الحدود وتوضع اما كلمة او كود ال hexa الخاص باللون

وكذلك الحال في bgcolor وهو لوضع خلفية ملونه للحقل

align وهو خاص بمكان الجدول بالصفحة ويكون كالتالي
center توسيط
left شمال
right يمين

انتهينا تقريبا من الجداول والان لننتقل لأهم ما يخص لغة الـPHP وهو الـ form

4-form :
يتم بناء الـ form بهذا الوسم
رمز Code:

ويتم اغلاقة بهذا الوسم

رمز Code:

لننتقل الان لبعض خصائصة اهم ما يخصنا في هذه الخصائص هو

1- Text:مختص بمساحة انت تحددها ليتم كتابة النص بداخلها

2-Password:مختص بأخفاء النص لأنه سيكون عبارة عن كلمة مرور محددة

3-Radio:هذا النوع مختص بوضع اكثر من خيار ولا يمكنك اختيار الا واحد منها مثلا
الجنس : سيكون اما ذكر او انثى ولابد من اختيار خيار واحد فقط

4-Check box:هنا بعكس السابق وهو لعدة اختيارات مثلا الهوايات (سباحة,رسم,كتابة)

5-File:في هذه الخاصية يمكنك المتصفح من فتح ملفات جهازك واختيار ملف مثلا
كان السكريبت الذي نعمل به هو سكريبت لرفع الملفات وعن طريق هذه الخاصية يمكننا
من اختيار الملف المراد تحميلة الى الموقع.

لنرى الان كيفية العمل معها او ما هي الاوامر الخاصة بها :

1- Text : الكود الخاص به وشرحة سيكون في اسفلة

رمز Code:




سأقوم بشرح كل خاصية على في هذة المميزات على حدى حتى يتسنى لك الفهم التام

رمز Code:
input type="text"
في هذا الوسم قمنا بأختيار نوع الفورم الذي نريده وكان text

رمز Code:
name="username"
وهنا قمنا بأعطائة اسم
ولاحظ بانه لا يمكن لهذا الاسم ان يتكرر
ولا يمكن بأن يبدا بأرقام

رمز Code:
id="username"
واعطيناه قيمة لنتمكن من استدعاءه وهي الـ id
ولاحظ بانه لا يمكن لهذه القيمة ان يتكرر
ولا يمكن بأن يبدا بأرقام

رمز Code:
size="20"
وهنا نضع عدد الاحرف المراد كتابتها او استيعابها من قبل هذه الخاصية

رمز Code:
maxlength="20"
وهنا كان الحد الاعلى للاستيعاب

رمز Code:
value="تجربة الخاصية1"
هذه ستكون القيمة الافتراضية لما بداخل المربع

سهلة اليس كذلك ^^

2-وكذلك الحال للخاصية password ولكن الاختلاف الوحيد هو انه عندما نقوم بأختيار
ال type يجب بأن يكون password
وهذا مثال للتوضيح

رمز Code:

3- Radio لا يختلف كثيرا عن ما سبق

رمز Code:

Male

Female
رمز Code:

Male

Female
لاحظ هنا بأن كلمة Gender عند الخاصية name بنفس الشكل يعني فقط نفس الكلمة

والسبب في هذا يعود الى ان الخاصية radio تقوم بأعتبار الـ name المتشابة يكون من نفس الفصيلة
والمختلف يكون كل واحد فيهم فصيلة لوحدة مثلا

اذا كان الكود هكذا
رمز Code:

Male

Female
فسيتم تعريف الـGender1 بأنه منفصل عن الـGender وعند قيامك بالضغط لأختيار احدهما
ستلاحظ بأنك قمت بأختيار الاثنين معا لذا عند وضع خاصية الـ radio حافظ على قيامك بالتالي
اولا اعطاء الاختيارات نفس الـname مثل الـ male و الـ female فأنت تريد ان تختار احدهما وليس
كلاهما
ثانيا عند وجود اكثر من فصيلة بالصفحة مثلا
اختيار الجنس يكون به ذكر وانثى (يوضع لهم name واحد فقط)
واختيار ما بين هل اعجبك الموقع على سبيل المثال
سيكون الجواب اما نعم او لا (ويوضع لهم name متشابه ولكنه مختلف عن الـname في اختيار الجنس

وهذا مثال بسيط لما كنت اعني حاول تطبيقه بالفرونت بيج وسترى الفرق

رمز Code:

Male

Female



True

False
وكذلك الحال في ألـ Check box (حاول بتجربتها بنفسك)

4- Drop Down

تبدا بالوسم التالي


وهذا مثال للتوضيح
رمز Code:

5- Text Area وهو مختص بمكان كبير يحتوي على عدد كبير من الحروف لأدخال به

اي جمل او كلمات او ملاحظات تريدها

رمز Code:


الخاصية cols لعدد الاسطر والخاصية rows لعدد الاعمدة

6-Buttons
وهذه لأضافة زر في الصفحة وتكون انواع الازرار ثلاثة وهي
Button
submit:للأرسال
reset:لتفريغ الحقول

مثال على ما سبق :

رمز Code:



الخواص السابقة هي :
value="اذهب" وهي القيمة المدخلة على الزر
method="get" لا تشفر وتكون واضحة على شريط العنوان (سيتم شرحها لاحقا)
method="post" تشفر وتكون في شريط الحالة(سيتم شرحها لاحقا)
action="callus.html" هنا اسم الصفحة المراد ارسال القيم اليها



انتهى الدرس التحضيري للدخول الى عالم الـ php

واتمنى ان تكونو قد استفدتم منه ومن لدية اي استفسار انا جاهز

تدريب:قم بعمل فورم ارسال بريد وضع به ما تراه بالصورة بالاسفل
(تنبيه يرجى عدم استخدام الفرونت بيج في عمل الصفحة لأنك لازم تتعلم وتكتب بنفسك وتستفيد)

kamal-amazighe
تلميذ جد فعال
تلميذ جد فعال

عدد الرسائل : 294
العمر : 23
الموقع : www.kamal-amazighe.webobo.com
المستوى الدراسي : الثالتة إعدادي و ذلك فــي قــسـم 1
تاريخ التسجيل : 09/02/2008

معاينة صفحة البيانات الشخصي للعضو http://www.kamal-amazighe.webobo.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

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

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى