السلام عليكم ورحمة الله وبركاتة
كيف الحال اخواني ان شاء الله بخير
ستكون اول دروسنا في هذه الدورة بتعلم بعض المفاهيم الخاصة بلغة الـ HTML
حتى يسهل علينا التعامل معها عندما نحتاجها في لغة الـPhp وذلك لتداخلها الكبير معها
ما رايكم ان نبدا الان ..
بسم الله
الـ html هي لغة مخصصة بتصميم مواقع الانترنت وهي تحتوي على tags او الوسوم
يبدا بأشارة اصغر وينتهي بأشارة اكبر
هذا هو الوسم او التاج < > ويوضع بداخله كود برمجي
رمز Code:
< >
وبداخلة يوضع الكود البرمجي وتتكون نهايته من التالي
رمز Code:
</ >
وتكون التاجات(tag) مكونة من name و attributs
لنذهب الان لنرى اهم مجموعة من التاجز
1-Font Formating
رمز Code:
<font size="الحجم" face="اسم الخط"> </font>
رمز Code:
أ- <p> هنا توضع الفقرة المرادة </p>
وهي لوضع جمل مع بعضها البعض في مكان محدد
رمز Code:
ب- <b> hello! </b> وهي لجعل الخط غامق
رمز Code:
ج-<u> hello! </u>
وهذه لوضع خط اسفل الكلمة المراده
رمز Code:
د-<i> hello! </i> وهي لجعل الكلام بشكل مائل
انتهينا من مرحلة الـ Fonts ولنتقدم قليلا لنصل لمرحلة الـ Links او الروابط
2- Html Links
أ- احيانا تكون صفحاتنا طويلة جدا بحيث يصبح من الضروري وضع نقطة بداية للصفحة
وعند كل فقرة نضع نقطة لأرجاعنا لهذه البداية ويتم ذلك عن طريق
رمز Code:
أ-<a href="#بداية"> top </a>
يجب ان يكونو بنفس الصفحة
رمز Code:
<a name ="بداية"> بداية </a>
لنقم الان بشرح ما سبق لاحظ في البداية قمنا بكتابة href وهذه لتخبر المتصفح بأن المطلوب رابط
وبعدها قمنا بوضع # وهذا ليعلم المتصفح بأن المطلوب من نفس الصفحة ويقوم بالبحث عن كلمة
بداية وينقلنا منها الى اعلى الصفحة
ب- لنفرض بأن لديك صفحة (profile.html) وتريد ان تضع لها رابط بأي صفحة اخرى
ما عليك سوا اتباع التالي
لتعرف الطريقة
رمز Code:
<a href ="profile.html"> من نحن </a>
وسيقوم المتصفح بفتح الصفحة الجديد في نفس الصفحة الرئيسية
ولكن اذا اردت ان تقوم بفتح صفحة جديدة فأكتب الكود التالي
جـ- رمز Code:
<a href ="profile.html" target =_blank"> من نحن </a>
الـ attribut الذي قمنا بكتابته مختص بفتح صفحات جديدة من الروابط ويمكنك ايضا
ان تفتح الصفحة بنفس المتصفح عن طريق كتابة مثلا taget=_self
د- لنفرض بأنك تقوم بوضع روابط لمواقع اخرى ما عليك سوا كتابة اسم الموقع في هذه الخانة
رمز Code:
<a href ="www.yahoo.com" target =_blank"> yahoo </a>
هـ- هذا الكود اذا اردت وضع ايميل بمجرد الضغط على الزر ينتقل الى out look
رمز Code:
<a href ="mailto:design@3ber-al7ob.com?subject=الموضوع"> yahoo </a>
لاحظ بأنه عندما كتبنا كلمة subject قمنا بكتابة علامة استفهام قبلها ولم نقم بفتح كوتيشن مارك " هذه الكوتيشن مارك " لها
الان انتهينا من الروابط والايميلات وسننتقل لأهم ما في الـ HTML وهو
3- HTML Tables
تتكون الجداول من ثلاث تاجات رئيسية وهي
رمز Code:
<table> <tr> <td>
<table> هذا التاج مختص في فتح الجدول وله attributs خاصة وكثيرة
<tr> متخصص في فتح الصفوف وله ايضا attributs
<td> متخصص في فتح الاعمدة وله ايضا مثل السابق
لنبني معا جدولا صغيرا بدون اي خصائص ولنرى ماذا سيرسم لدينا
رمز Code:
<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)
رمز Code:
<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 بهذا الوسم
رمز Code:
<form>
ويتم اغلاقة بهذا الوسم
رمز Code:
</form>
لننتقل الان لبعض خصائصة اهم ما يخصنا في هذه الخصائص هو
1- Text:مختص بمساحة انت تحددها ليتم كتابة النص بداخلها
2-Password:مختص بأخفاء النص لأنه سيكون عبارة عن كلمة مرور محددة
3-Radio:هذا النوع مختص بوضع اكثر من خيار ولا يمكنك اختيار الا واحد منها مثلا
الجنس : سيكون اما ذكر او انثى ولابد من اختيار خيار واحد فقط
4-Check box:هنا بعكس السابق وهو لعدة اختيارات مثلا الهوايات (سباحة,رسم,كتابة)
5-File:في هذه الخاصية يمكنك المتصفح من فتح ملفات جهازك واختيار ملف مثلا
كان السكريبت الذي نعمل به هو سكريبت لرفع الملفات وعن طريق هذه الخاصية يمكننا
من اختيار الملف المراد تحميلة الى الموقع.
لنرى الان كيفية العمل معها او ما هي الاوامر الخاصة بها :
1- Text : الكود الخاص به وشرحة سيكون في اسفلة
رمز Code:
<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>
سأقوم بشرح كل خاصية على في هذة المميزات على حدى حتى يتسنى لك الفهم التام
رمز 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:
<input type="password" name="pass" id="pass" size="20" maxlength="20" value="تجربة الخاصية1" tab="1">
3- Radio لا يختلف كثيرا عن ما سبق
رمز Code:
<input type="radio" name="Gender">
Male
<input type="radio" name="Gender">
Female
رمز Code:
<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 المتشابة يكون من نفس الفصيلة
والمختلف يكون كل واحد فيهم فصيلة لوحدة مثلا
اذا كان الكود هكذا
رمز Code:
<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 في اختيار الجنس
وهذا مثال بسيط لما كنت اعني حاول تطبيقه بالفرونت بيج وسترى الفرق
رمز Code:
<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>
وهذا مثال للتوضيح
رمز Code:
<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 وهو مختص بمكان كبير يحتوي على عدد كبير من الحروف لأدخال به
اي جمل او كلمات او ملاحظات تريدها
رمز Code:
<textarea name="area" id="area" cols="20" rows="20">
اكتب ملاحظاتك هنا
</textarea>
الخاصية cols لعدد الاسطر والخاصية rows لعدد الاعمدة
6-Buttons
وهذه لأضافة زر في الصفحة وتكون انواع الازرار ثلاثة وهي
Button
submit:للأرسال
reset:لتفريغ الحقول
مثال على ما سبق :
رمز Code:
<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
واتمنى ان تكونو قد استفدتم منه ومن لدية اي استفسار انا جاهز
