قوانين كتابة كود HTML كالمحترفين!

[ابو الويس]

مرحبا لطريقة كتابة كود HTML له اهميه قصوى في فهم الكود بعد ذلك
هل تريد ان تكتب الكود كما تكتبه البرامج مثل الفرونت بيج وغيرها اذا عليك ان تفهم بعض القوانين التاليه ولكن قبل قولنين الكتابه يجب عليك ان تفهم التعريف التاني:

SGML ELEMENT :

ما هو عنصر SGML في الكود ؟
كل كود يتكون من عناصر SGML والعنصر الواحد هو باختصار كل قطعة نص او وسم (TAG) سواء كان وسم فتح او اغلاق.
مثال: الكود التالي:

<a href="one.html"><font face="tahoma">Press <br/>here plz</font></a>

يحتوي على 7 عناصر sgml .. وهي:

1. <a href="one.html">
2. <font face="tahoma">
3. Press
4. <br/>
5. here plz
6. </font>
7. </a>

*******************************************
الان نأتي الى الطريقه الصحيحه في كتابة الكود وهي ما يسمى
An indented HTML code
ال indented code يتبع القوانين التاليه

1) كل عنصر (element) يكون في سطر منفرد!!
2) الاسطر التي تأتي بعد وسم الفتح <...> تكون مع ازاحه فراغ واحد عن الي قبلها
3) الاسطر التي تأتي بعد وسم الاغلاق <..../>تكون مع فراغ واحد اقل عن السطر الذي قبلها
4) الاسطر التي تحوي الجمل النصيه او الوسوم مثل وسم ال <br> (وهو ليس وسم فتح ان صحت التسميه) تأتي مع نفس الازاحه كما السطر الذي قبلها الا اذا كان الذي قبلها فتح وسم (قاعده 2).

ساكتب كود الان وبعدها نطبق عليه القوانين:
الكود:

<table border="1"><tr bgcolor="gray"><td align="middle">hello</td><td><a href="http://yahoo.com"><img src="yahoo.gif"></a></td></tr></table><br><font face="tahoma">Thx alot</font>

ال indented html code هو :

<table border="1">              اول سطر بدون فراغات
 <tr bgcolor="gray">            ازاحه 1 لانه يأتي بعد وسم فتح
  <td align="middle">           ايضا ازاحه 1 لانه يلأتي بعد زسم فتح
   hello                        ازاحه 1 لانه يأتي بعد وسم فتح
   <br>                         قاعده 4
   again                        قاعده 4
  </td>                         ازاحه ناقص واحد لانه وسم اغلاق
  <td>                          لا يوجد ازاحه في هذه الحاله
   <a href="http://yahoo.com">  ازاحه 1 لانه يأتي بعد وسم فتح 
    <img src="yahoo.gif">       ازاحه 1 لانه يأتي بعد وسم فتح
   </a>                         ازاحه ناقص واحد لانه وسم اغلاق
  </td>                         ازاحه ناقص واحد لانه وسم اغلاق
 </tr>                          ازاحه ناقص واحد لانه وسم اغلاق
</table>                        ازاحه ناقص واحد لانه وسم اغلاق
<br>                            لا توجد ازاحه.. لاحظ هذا ليس وسم فتح بس مجرد نزول سطر
 <font face="tahoma">           ازاحه 1 لانه يأتي بعد وسم فتح
  Thx alot                      ازاحه 1 لانه يأتي بعد وسم فتح
 </font>                        زاحه ناقص واحد لانه وسم اغلاق

واخيرا اقول لو احببت ان تلغي القاعده الاولى وهي ان كل عنصر في سطر
يعني لو احببت ان تضح مثلا فتح واغلاق ال td في سطر واحد فهذا لا يمنع ان تتقيد بباقي القوانين
وهذا ما تعمله الفرونت بيج .

وتحياتي

[Zizwar]

ماشاء الله
إستمر بارك الله فيك

[jadweb.com]

جزاك الله خير موضوع مفيد .

[مناااف]

شكراً لك أخي الفاضل

وبارك الله فيك

[ابو الويس]

العفو شباب