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

يعطيك العافية اخي الحبيب
يعني لما نشتغل على الفرونت بيج بيعطينا هذه الوسوم تلقائيا
الرجاء شرحها بهذه الطريقة وطريقة الفرونت بيج توسيعا للفائدة

بالصور

وان تقوم بتصميم موقع متكامل حتى وان طالت المدة فنحن في الانتظار استاذنا لرائع

ياريت الشرح بخطوات وبالصور حتى نفتهم أكثرمثل ما كال الأخ صقر الجنوب

iياريت الشرح بخطوات وبالصور حتى نفتهم أكثرمثل ما كال الأخ صقر الجنوبsafaqah

شكرا لك على مرورك

مشكورين علي المرور وجاري رفع الصور