تُعرف أكواد HTML بهيكل صفحة الويب والتي تعطي المتصفح وصفََا لكيفية عرض محتوياتها , وهي إختصار لـ  Hyper Text Markup Language , وهي هامّة وأساسية لعرض محتويات وعناصر صفحات الويب على متصفح الإنترنت , وبدونها لا يمكن عرض محتويات أي صفحة ويب.

حديثنا في هذا الموضوع يتناول فهم وآلية عمل HTML والتقسيم الخاص بها في عرض صفحات الويب , بطبيعة الحال لن نشرح ونتعمق كثيرََا لأنه يستهلك وقتًًا كثيرًا وجهدََا كبيرََا لتغطية كافة الجوانب , خاصة أنك في منصة بلوجر لا تحتاج إلى الإلمام الكامل بـ HTML فغالبََا أنت تتعامل مع الأكواد والإضافات بالنسخ واللصق من مواقع أخرى , ولكن سأعرفك بالنقاط المهمة حتى تكون على علم ودراية بطريقة عمل مدونتك وتكون قادرََا على تخصيص مدونتك كما تريد بشكل كامل وكذلك حل المشاكل بنفسك حال واجهتك.
 
الشرح يحتاج تركيزََا ومزيدََا من الصبر , لنبدأ:

القالب " أو التمبليت " ما هو إلا عبارة عن أكواد يقرأها المتصفح فينفذها ويعرضها بالضبط كما يقرأها ليعطيك التصميم المطلوب , هذه حقيقة علمية.

قواعد بسيطة ينبغي ان تتعرف عليها بخصوص لغة HTML قبل البدء في التعديل على القالب هي :

1- كل الاكواد يجب ان تكون ( سمول small ) وليس كابيتال:

مثال:  <head> </head>

2- قيم هذه الأكواد يجب ان توضع بين علامتي تنصيص:

مثال:  id='sidebar' أو id="sidebar"

3- الأكواد المزدوجة التي توضع بداخلها القيم يجب ان تقفل بأوسمة الاغلاق:

مثال: اذا بدأت قطعة الرأس بكلمة <head> فلابد ان تغلقها بنفس الكلمة وقبلها شرطة مائله " سلاش " كما بالشكل </head>

4- الاكواد الفردية ايضا يجب ان تكون مقفله بنفس الطريقة.

مثال:

<br> ... </br>
<img> ... </img>
<input> ... </input>
<frame> ... </frame>
<hr> ... </hr>
<meta> ... </meta>
<link> ... </link>

5- الأكواد يجب ان تكتب بشكل مرتب:  بنظام يُدعى " التعشيش ": سنتعرف عليه فيما بعد.

6- كل الأكواد تجدها بين كلمتي <html> </html>.


وبشكل عام أي قالب نستطيع ان نقسمه الى جزأين :

جزء الرأس head : وبه أكواد كل أجزاء المدونة , كل جزء على حده , يحدد فيها طبيعة هذا الجزء وخصائصه مثل لون الخلفية ولون اللينكات وشكلها الخ ..
جزء الجسم body : وفيه نحدد التصميم الشجري لأجزاء المدونة التي تحدثنا عنها في منطقة الرأس , ومهمة هذا التصميم الشجري هو توضيح العلاقة بين تلك الأجزاء واماكنها في صفحة المدونة تحديدا دقيقا.

ملاحظة مهمة جدا: تقسيم القالب الى رأس وجسم لا يعني جسم المدونة او رأس المدونة, هذا التقسيم خاص بالقالب فقط , برجاء لا تربط بينه وبين تقسيم المدونة ككل الى رأس وجسم وذيل وأطر جانبيه , حسنا ؟
 
في الجزء الأول ذكرت ان هناك نظام خاص بترتيب الأكواد يدعى نظام التعشيش nesting , ببساطة تخيل صندوق كبير داخله صندوق اصغر منه بداخله صندوق اصغر وهكذا , اذا تخيلنا الصندوق الكبير جدا للقالب بدايته ونهايته هما كلمتى <html> و </html> على الترتيب , فإن داخل هذا الصندوق الكبير يوجد صندوقان اصغر هما صندوق منطقة الراس (<head> و </head> )  وصندوق منطقة الجسم ( <body> و </body> )  , لذلك إذا رتبنا الترتيب الصحيح سيكون بالشكل الاتي:

<html>
<head>
هنا أكواد منطقة الرأس
</head>
<body>
هنا أكواد منطقة الجسم
</body>
</html>


هذا هو نظام التعشيش ببساطة وليس قاصرََا فقط على تلك الأمثلة , وإنما سنجده كثيرا لاحقا.

وملحوظة أكررها : ليس معنى الرأس والجسم هو رأس المدونة أو جسمها , هذه التقسيمة خاصه بالقالب فقط بعيدََا عن التقسيم المعروف لأي مدونة إلى : رأس وجسم وذيل وأطر جانبية.

كلمة <html> هى بداية الأكواد الفعلية للقالب التي سيراها المتصفح وينفذها ليعطيك الشكل الصحيح للمدونة. وتذكر انها بداية الصندوق الكبير جدا , لذلك في نهاية القالب توقع ان تجد كلمة </html> - نفس الكلمة مسبوقة بشرطة مائلة - دليلا على نهاية هذا الصندوق. لنرى ما داخل هذا الصندوق إذن:

وصلنا لبداية احد الصندوقين الكبار وهو صندوق منطقة الراس <head>
هذا الصندوق ستجد به صناديق كثيرة جدا أصغر منه , في كل منها سنجد الأكواد التي سيتم بها تحديد شكل كل قطعة فى المدونة على حده , مثلا ستجد به قطعة الإطار الجانبي والأكواد الخاصة بها وقطعة الجزء الرئيسي الذي به التدوينات والأكواد الخاصة به وقطعة الذيل والأكواد الخاصة به وهكذا.

أول صندوق سيصادفنا هذا الصندوق الصغير جدا الذي سيحدد لنا عنوان المدونة الرئيسي

<title><data:blog.pageTitle/></title>

لنعتبره صندوق صغير جدا بدايته <title> ونهايته </title> وبداخله القيمة التي ستحدد لنا ما هو عنوان المدونة , والقيمة هي <data:blog.pageTitle/> , وطبعا ليست هذه القيمة التي ستظهر في المدونة ولكنها مجرد تعريف لهذه القيمة.

نتحدث الآن بشئ من التفصيل عن جزء ( الجسم body ) لأي قالب , ولنتذكر ان وظيفة هذا الجزء هو ترتيب أجزاء المدونة ( الرأس والجسم والأطر الجانبية والذيل ) الترتيب الصحيح , وتحديد مكان كل جزء منها بالنسبة للأجزاء الأخرى.

بينما كانت وظيفة جزء ( الرأس head ) هو تحديد شكل كل مافي المدونة , لونه وحجمه ولون الخلفية و طوله وعرضه الخ ..

دعني اعرض صورتين مهمتين
الأولى تعبر عن شكل المدونة الذى يظهر لك وللزائرين , هذا هو الشكل العام لأي مدونة , ولأي موقع إن أردت الدقة لكن دعنا نتحدث عن البلوجر فقط أفضل.

لاحظ ان كل جزء له لونه المميز , تذكر هذا اللون جيدا لأننا سنحتاج الى المطابقة بين الصورة الاولى والثانية.


اضغط على الصورة لتراها بالحجم الطبيعي


الصورة الثانية بها توضيح لمنظر القالب = ( صندوق الأكواد ) الجزء الاعلى هو جزء ( الراس ) والجزء الاسفل هو جزء ( الجسم ) , لاحظ انه يوجد مطابقة فى الالوان بين الجزئين , وبين الصورة الثانية كلها والصورة الأولى بالأعلى .

ماعدا الكلام الموجود داخل المربعات بجزء الجسم , وهو

<b:section id="The Section id">
<b:widget id="The Widget id">
</b:widget>
</b:section>
هو ملون فقط للايضاح.

اضغط على الصورة لتراها بحجمها الطبيعي

اضغط على الصورة لتراها بالحجم الطبيعى
بعض الاختصارات:

1- كلمة div اختصار لكلمة divition بمعنى انشاء قسم جديد يسمى كذا , واسم هذا القسم او العنوان هو الـ id وهو مميز لكل قسم .

2- كلمة section معناها " قسم " أيضا , لكن قسم فرعي داخل القسم الأكبر منه divition , ولكل section الـ id الخاص به أيضا .

3- كلمة class معناها الفئة , وبها ستجد اسم الجزء للتعريف به , مثله مثل الـ id مع بعض الاختلاف , دعك من هذا الإختلاف الان.

4- كلمة widget معناها القطعة التي توجد داخل كل section , هذه القطع هي التي نراها بالمدونة, مثل قطعة البروفايل وقطعة الأرشيف وقطعة الساعة مثلا إلخ  ..

لكل قطعة id مميز لها حسب نوع القطعة , او الأداة التي إخترتها , فلو أخترت الاداه html/java script من صفحة الأدوات ستنشأ قطعة جديده في قالب المدونة لها id اسمه html , ومرقمة برقم معين لو كان هناك اكثر من أداة من نفس النوع , مثلا html1 , html2 , html3 وهكذا.
ولو أخترت اداه نصيه text ستنشأ قطعة جديده الـ id لها اسمه text1 و text2 و text3 وهكذا في حال وجود أكثر من قطعة نصية.


كل قطعة تكون بهذا الشكل:

<b:widget id='The Widget id' locked='false' title='Title of the widget' type='Type of the widget'/>
ولا تحتاج الى كود اغلاق فى الغالب.

اما الـ section فلابد له من كود اغلاق بهذا الشكل
<section> < > < > </section>


وكذلك الـ div يحتاج الى اغلاق بهذا الشكل
<div> < > < > </div>

ترتيب أجزاء المدونة في جزء ( الجسم ) يتبع نظام " التعشيش nesting " الذى تحدثنا عنه سابقا.

بمعنى : من الطبيعي ان الإطار الجانبي sidebar واقع داخل الـ body , لذلك يجب وضع أكواد الإطار الجانبي كلها من بدايتها <div id='sidebar'> وحتى نهايتها </div> داخل جزءالـ body , وليس قبله او بعده مثلا.

مثال اخر , ذيل المدونة هو آخر شئ تجده في المدونة بالأسفل , فمن الطبيعي أن تكون أكواد الذيل من اولها <div id='footer'> وحتى اخرها </div> واقعة بالجزء الأسفل من جزء الـ body وقبل نهايته مباشرة بكلمة </body>.

وصلنا للختام، أتمنى يكون الشرح واضحََا وسهلََا.
اللهم صل وسلم على سيدنا محمد وأله وصحبه.