أكاديمـيـة العرضـة الجنوبيــة - ربـاع - ..::.. دروس في Html مهمة جدا وهي بدايتنا لدورة الـ Php .::.

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

وسنبدا دروسنا بأذن الله بتعلم الاوامر المهمة بـ ال html لدرجة اهميتها

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

كود:

كود:

< >

وبداخلة يوضع الكود البرمجي وتتكون نهايته من التالي

كود:

كود:

< />

وتكون التاجات من 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 يمين
انتهى الدرس الاول واتمنى ان تكونو قد استفدتم منه ومن لدية اي استفسار انا جاهز
واذا كنت قد اخطأت اتمنى اصلاح الخطأ لتداركة