سيكون درسنا الان اخواني الكرام بتعلم بعض المفاهيم الخاصة بلغة الـ HTML
حتى يسهل علينا التعامل معها عندما نحتاجها في لغة الـPhp وذلك لتداخلها الكبير معها
ما رايكم ان نبدا الان ..
بسم الله
اولا قم بفتح اي محرر نصوص ويفضل الفرونت بيج
وقم بمتابعة الشرح مع كتابة ما هو مخصص في هذا الدرس كما هو موضح بالصورة
لاحظ الصورة السابقة قمنا بكتابة الاكواد ما بين الوسوم<body>
وانت تستطيع انك تطبق الدرس ما بين هذول الوسوم
ولمن لا يملك الفرونت بيج يقوم بتجربة كل الاكواد في اي محرر نصوص ويحفظها بأمتداد
.html وبعدها يقوم بفتحها عن طريق المتصفح ليرى نتيجة عملة
الـ html هي لغة مخصصة بتصميم مواقع الانترنت وهي تحتوي على tags او الوسوم
يبدا بأشارة اصغر وينتهي بأشارة اكبر
هذا هو الوسم او التاج < > ويوضع بداخله كود برمجي
< >
وبداخلة يوضع الكود البرمجي وتتكون نهايته من التالي
</ >
وتكون التاجات(tag) مكونة من name و attributs
لنذهب الان لنرى اهم مجموعة من التاجز
1-Font Formating
<font size="الحجم" face="اسم الخط"> </font>
أ- <p> هنا توضع الفقرة المرادة </p>
وهي لوضع جمل مع بعضها البعض في مكان محدد
ب- <b> hello! </b> وهي لجعل الخط غامق
ج-<u> hello! </u>
وهذه لوضع خط اسفل الكلمة المراده
د-<i> hello! </i> وهي لجعل الكلام بشكل مائل
انتهينا من مرحلة الـ Fonts ولنتقدم قليلا لنصل لمرحلة الـ Links او الروابط
2- Html Links
أ- احيانا تكون صفحاتنا طويلة جدا بحيث يصبح من الضروري وضع نقطة بداية للصفحة
وعند كل فقرة نضع نقطة لأرجاعنا لهذه البداية ويتم ذلك عن طريق
أ-<a href="#بداية"> top </a>
يجب ان يكونو بنفس الصفحة
<a name ="بداية"> بداية </a>
لنقم الان بشرح ما سبق لاحظ في البداية قمنا بكتابة href وهذه لتخبر المتصفح بأن المطلوب رابط
وبعدها قمنا بوضع # وهذا ليعلم المتصفح بأن المطلوب من نفس الصفحة ويقوم بالبحث عن كلمة
بداية وينقلنا منها الى اعلى الصفحة
ب- لنفرض بأن لديك صفحة (profile.html) وتريد ان تضع لها رابط بأي صفحة اخرى
ما عليك سوا اتباع التالي
لتعرف الطريقة
<a href ="profile.html"> من نحن </a>
وسيقوم المتصفح بفتح الصفحة الجديد في نفس الصفحة الرئيسية
ولكن اذا اردت ان تقوم بفتح صفحة جديدة فأكتب الكود التالي
جـ-
<a href ="profile.html" target =_blank"> من نحن </a>
الـ attribut الذي قمنا بكتابته مختص بفتح صفحات جديدة من الروابط ويمكنك ايضا
ان تفتح الصفحة بنفس المتصفح عن طريق كتابة مثلا taget=_self
د- لنفرض بأنك تقوم بوضع روابط لمواقع اخرى ما عليك سوا كتابة اسم الموقع في هذه الخانة
<a href ="www.yahoo.com" target =_blank"> yahoo </a>
هـ- هذا الكود اذا اردت وضع ايميل بمجرد الضغط على الزر ينتقل الى out look
<a href ="mailto:design@3ber-al7ob.com?subject=الموضوع"> yahoo </a>
لاحظ بأنه عندما كتبنا كلمة subject قمنا بكتابة علامة استفهام قبلها ولم نقم بفتح كوتيشن مارك " هذه الكوتيشن مارك " لها
الان انتهينا من الروابط والايميلات وسننتقل لأهم ما في الـ HTML وهو
3- HTML Tables
تتكون الجداول من ثلاث تاجات رئيسية وهي
<table> <tr> <td>
<table> هذا التاج مختص في فتح الجدول وله attributs خاصة وكثيرة
<tr> متخصص في فتح الصفوف وله ايضا attributs
<td> متخصص في فتح الاعمدة وله ايضا مثل السابق
لنبني معا جدولا صغيرا بدون اي خصائص ولنرى ماذا سيرسم لدينا
<table>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
</tr>
<tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> 7</td>
<td> 8</td>
<td> 9</td>
</tr>
</table>
لو وضعت هذا الكود في note pad وقمة بتشغيلة في المتصفح سيظهر لك الارقام مرتبة
بشكل جدول منظم ومنسق
لنقم الان بالانتقال الى خواص الجدول (attributs)
<table border="2" width="100%" hieght="100%" bordercolor="#ffffff" bgcolor="white" align="center"> </table>
الكثير من الخواص اليس كذلك ؟؟
لا يهم لنأتي الان لشرحها بالتفصيل
border وهو خاص بسماكة الحدود
width خاص بعرض الجدول ويمكن كتابته اما بالنسبة او بالبكسيل
اذا كانت نسبة يجب وضع اشارة % قبل الرقم واذا كان بيكسل يوضع الرقم لوحدة
وكذلك الحال في ال hieght ولكن عملة هو الطول
bordercolor وهو كود خاص بلون الحدود وتوضع اما كلمة او كود ال hexa الخاص باللون
وكذلك الحال في bgcolor وهو لوضع خلفية ملونه للحقل
align وهو خاص بمكان الجدول بالصفحة ويكون كالتالي
center توسيط
left شمال
right يمين
انتهينا تقريبا من الجداول والان لننتقل لأهم ما يخص لغة الـPHP وهو الـ form
4-form :
يتم بناء الـ form بهذا الوسم
<form>
ويتم اغلاقة بهذا الوسم
</form>
لننتقل الان لبعض خصائصة اهم ما يخصنا في هذه الخصائص هو
1- Text:مختص بمساحة انت تحددها ليتم كتابة النص بداخلها
2-Password:مختص بأخفاء النص لأنه سيكون عبارة عن كلمة مرور محددة
3-Radio:هذا النوع مختص بوضع اكثر من خيار ولا يمكنك اختيار الا واحد منها مثلا
الجنس : سيكون اما ذكر او انثى ولابد من اختيار خيار واحد فقط
4-Check box:هنا بعكس السابق وهو لعدة اختيارات مثلا الهوايات (سباحة,رسم,كتابة)
5-File:في هذه الخاصية يمكنك المتصفح من فتح ملفات جهازك واختيار ملف مثلا
كان السكريبت الذي نعمل به هو سكريبت لرفع الملفات وعن طريق هذه الخاصية يمكننا
من اختيار الملف المراد تحميلة الى الموقع.
لنرى الان كيفية العمل معها او ما هي الاوامر الخاصة بها :
1- Text : الكود الخاص به وشرحة سيكون في اسفلة
<form> <input type="text" name="username" id="username" size="20" maxlength="20" value="تجربة الخاصية1" tab="1"> <input type="text" name="username1" id="username1" size="20" maxlength="20" value="تجربة الخاصية" tab="2"> </form>
سأقوم بشرح كل خاصية على في هذة المميزات على حدى حتى يتسنى لك الفهم التام
input type="text"
في هذا الوسم قمنا بأختيار نوع الفورم الذي نريده وكان text
name="username"
وهنا قمنا بأعطائة اسم
ولاحظ بانه لا يمكن لهذا الاسم ان يتكرر
ولا يمكن بأن يبدا بأرقام
id="username"
واعطيناه قيمة لنتمكن من استدعاءه وهي الـ id
ولاحظ بانه لا يمكن لهذه القيمة ان يتكرر
ولا يمكن بأن يبدا بأرقام
size="20"
وهنا نضع عدد الاحرف المراد كتابتها او استيعابها من قبل هذه الخاصية
maxlength="20"
وهنا كان الحد الاعلى للاستيعاب
value="تجربة الخاصية1"
هذه ستكون القيمة الافتراضية لما بداخل المربع
سهلة اليس كذلك ^^
2-وكذلك الحال للخاصية password ولكن الاختلاف الوحيد هو انه عندما نقوم بأختيار
ال type يجب بأن يكون password
وهذا مثال للتوضيح
<input type="password" name="pass" id="pass" size="20" maxlength="20" value="تجربة الخاصية1" tab="1">
3- Radio لا يختلف كثيرا عن ما سبق
<input type="radio" name="Gender"> Male <input type="radio" name="Gender"> Female
<input type="radio" name="Gender" checked tabindex="1" value="v1"> Male <input type="radio" name="Gender" value="v2" tabindex="2" > Female
لاحظ هنا بأن كلمة Gender عند الخاصية name بنفس الشكل يعني فقط نفس الكلمة
والسبب في هذا يعود الى ان الخاصية radio تقوم بأعتبار الـ name المتشابة يكون من نفس الفصيلة
والمختلف يكون كل واحد فيهم فصيلة لوحدة مثلا
اذا كان الكود هكذا
<input type="radio" name="Gender1" checked tabindex="1" value="v1"> Male <input type="radio" name="Gender" value="v2" tabindex="2" > Female
فسيتم تعريف الـGender1 بأنه منفصل عن الـGender وعند قيامك بالضغط لأختيار احدهما
ستلاحظ بأنك قمت بأختيار الاثنين معا لذا عند وضع خاصية الـ radio حافظ على قيامك بالتالي
اولا اعطاء الاختيارات نفس الـname مثل الـ male و الـ female فأنت تريد ان تختار احدهما وليس
كلاهما
ثانيا عند وجود اكثر من فصيلة بالصفحة مثلا
اختيار الجنس يكون به ذكر وانثى (يوضع لهم name واحد فقط)
واختيار ما بين هل اعجبك الموقع على سبيل المثال
سيكون الجواب اما نعم او لا (ويوضع لهم name متشابه ولكنه مختلف عن الـname في اختيار الجنس
وهذا مثال بسيط لما كنت اعني حاول تطبيقه بالفرونت بيج وسترى الفرق
<input type="radio" name="Gender" checked tabindex="1" value="v1"> Male <input type="radio" name="Gender" value="v2" tabindex="2" > Female <br> <input type="radio" name="t&f"> True <input type="radio" name="t&f"> False
وكذلك الحال في ألـ Check box (حاول بتجربتها بنفسك)
4- Drop Down
تبدا بالوسم التالي
<select>
وتكون خياراتها كما يلي
<option> الاردن</option>
وتنتهي بـ
</select>
وهذا مثال للتوضيح
<select name="country" dir="rtl" multiple size="1" tabindex="1"> <option selected>Jordan</option> <option>Pal</option> <option>Sudia</option> <option>kuwait</option> <option>Iraq</option> </select>
5- Text Area وهو مختص بمكان كبير يحتوي على عدد كبير من الحروف لأدخال به
اي جمل او كلمات او ملاحظات تريدها
<textarea name="area" id="area" cols="20" rows="20"> اكتب ملاحظاتك هنا </textarea>
الخاصية cols لعدد الاسطر والخاصية rows لعدد الاعمدة
6-Buttons
وهذه لأضافة زر في الصفحة وتكون انواع الازرار ثلاثة وهي
Button
submit:للأرسال
reset:لتفريغ الحقول
مثال على ما سبق :
<input type="button" value="اذهب" method="get" action="callus.html" > <input type="submit" value="اذهب" method="post" action="callus.html" > <input type="reset" value="احذف" >
الخواص السابقة هي :
value="اذهب" وهي القيمة المدخلة على الزر
method="get" لا تشفر وتكون واضحة على شريط العنوان (سيتم شرحها لاحقا)
method="post" تشفر وتكون في شريط الحالة(سيتم شرحها لاحقا)
action="callus.html" هنا اسم الصفحة المراد ارسال القيم اليها
انتهى الدرس التحضيري للدخول الى عالم الـ php
واتمنى ان تكونو قد استفدتم منه ومن لدية اي استفسار انا جاهز
تدريب:قم بعمل فورم ارسال بريد وضع به ما تراه بالصورة بالاسفل
(تنبيه يرجى عدم استخدام الفرونت بيج في عمل الصفحة لأنك لازم تتعلم وتكتب بنفسك وتستفيد)
اخواني ارجوكم تقراو الدرس جيدا وتتبعوه كلمة بكلمة وتطبقوا عليه
ولكم مني كل الشكر والتقدير ,,,
10 مايو, 2008 في الساعة 8:25 ص
شكرا استاذي الغالي دكتور حازم على الشرح الوافي والكافي وبصراحه جدا جدا مفيد الموقع ويدعم كل من يريد تعلم البي اتش بي