شيفرة الكتابة: دليل المدوّن لترويض وحوش الـ HTML
لا تترك الكود المفاجئ يفسد يومك. تعلم كيف تسيطر على لغة الـ HTML وتكتب مقالات بهيكلية احترافية وكود نظيف يخدم القارئ ومحركات البحث.
عدد الكلمات: ٤٢٠٠ تقريباً • مدة القراءة المتوقعة: ٢٨ دقيقة
دليل HTML للمدونين العرب | تعلم HTML
من التحرير العشوائي إلى السيطرة الكاملة على الكود
تخيل أنك تقف على خشبة مسرح مضاءة بأضواء براقة، والستائر المخملية تحيط بك من كل جانب. المشهد جميل، المظهر احترافي، لكنك فجأة تلمح خلف الكواليس تشابكاً معقداً من الحبال والأسلاك والرافعات الحديدية.
في عالم التدوين، يشكل المحرر التقليدي (الواجهة المرئية) خشبة المسرح الأنيقة. بينما تمثل لغة HTML تلك الأسلاك والرافعات التي تحرك كل شيءٍ من وراء الكواليس.
بينما يكتفي معظم الكُتّاب بالبقاء في واجهة المحرر الأنيقة، يجد المدون المحترف نفسه أحياناً مجبراً على الغوص “خلف الكواليس”. تلك اللحظة التي ينتقل فيها من المحرر الرسومي إلى محرر النصوص (Text Editor) قد تكون مرعبة؛ حيث يختفي التنسيق المرتب ليحل محله سيل من الرموز والكلمات والأوامر المتداخلة.
لكن—وبمجرد فهم المنطق البسيط لهذه الرموز—ستتحول من مجرد مستخدم للمنصة إلى سيد لها. قادرٌ على إصلاح أي خللٍ تنسيقيٍ بلمساتٍ بسيطةٍ ودقيقة، وقادرٌ على التحكم الكامل بمظهر مقالتك وسلوك عناصرها.
الـ HTML بالنسبة للمدون ليست لغةً برمجةً معقدة، بل هي فن هيكلة الأفكار ليفهمها العقل البشري والآلة على حد سواء.
لماذا كل هذا المجهود؟ فلسفة الكود النظيف
قد تتساءل: “لماذا لا أكتفي بالمحرر الرسومي؟ لماذا أتعلم كل هذا الكود المخيف؟”
الإجابة بسيطة: الكود النظيف ليس مجرد رفاهيةٍ تقنية، بل هو احترامٌ للقارئ وللآلة معاً.
عندما تضع وَسْماً (Tag) في غير مكانه، أو تنسى إغلاق فقرة، فإنك ترهق المتصفح وتجبره على “تخمين” ما كنت تقصده. هذا التخمين قد يؤدي إلى:
- بطء التحميل: المتصفح يحاول إصلاح الأخطاء بدل تنفيذ الكود مباشرة
- تشوه المظهر: النصوص قد تظهر بأحجامٍ خاطئةٍ أو في أماكنٍ غير متوقعة
- سوء التصنيف في محركات البحث: Google لا تفهم هيكل صفحتك بشكلٍ صحيح
- صعوبة التعديل المستقبلي: عند العودة لتحرير المقالة، يكون كل شيءٍ فوضوي
الكود المنظم والنظيف يضمن:
- ✓ سرعة التحميل والاستجابة
- ✓ تنسيقٌ موحدٌ وجميل
- ✓ ظهورٌ أفضل في محركات البحث
- ✓ سهولة التعديل والصيانة
- ✓ توافقٌ مع جميع الأجهزة (الهواتف، التابليت، الحواسيب)
تذكر: القوة الحقيقية للمدون تكمن في معرفة كيفية بناء جدران بيته الرقمي، لا فقط في تأثيثها بشكل جميل.
الدرس الأول: قاعدة “الشطيرة”
هذه أهم قاعدة ستتعلمها. إذا لم تفهم شيئاً آخر، تذكر هذا:
إذا فتحت أمراً، يجب أن تغلقه، دائماً، وبدون استثناءات.
مثل الشطيرة: لا يمكن أن تكون شطيرة بدون خبز من الأعلى والأسفل. وإلا ستكون فقط مكوناتٍ متناثرة.
أمثلة:
<p>هذه فقرة</p> <h2>هذا عنوان</h2> <a href="https://example.com">انقر هنا</a> <p>هذه فقرة دون إغلاق صحيح <h2>هذا سيؤدي لفوضى</h2>
لاحظ الفرق: الأمر يبدأ بـ <p> ولا بد أن ينتهي بـ <p/>. الفارق الوحيد هو الخط المائل (/) قبل اسم الأمر. “اتجاه قراءة وترتيب الكود من اليسار إلى اليمين دوماً، بغض النظر عن المظهر للقارئ.
نسيان إغلاق الوسم هو السبب الأول والرئيسي وراء انهيار التنسيق المفاجئ وفوضى الترتيب.
ثانياً: معلومات ما وراء الستار (هوية الصفحة)
قبل أن يرى القارئ محتواك، يجب أن تخبر المتصفح: “من أنا؟ ما اسم هذه الصفحة؟ كيف أريدها أن تبدو؟”
هذه المعلومات توضع عادة في منطقة تسمى “الرأس” (Head)، وتحتوي على معلوماتٍ غير مرئيةٍ للقارئ:
<head>
<!-- عنوان الصفحة الذي يظهر في نتائج البحث والتبويبة -->
<title>شيفرة الكتابة: دليل المدوّن لـ HTML</title>
<!-- وصف الصفحة (Meta Description) -->
<meta name="description" content="دليل شامل لتعلم HTML للمدونين">
<!-- تحديد اللغة والترميز -->
<meta charset="UTF-8">
<html lang="ar" dir="rtl">
<!-- أوامر التنسيق (CSS) -->
<style>
h2 { color: #c0392b; }
p { line-height: 1.8; }
</style>
</head>
ما تعنيه كل سطر:
- <title>: اسم صفحتك الذي يظهر في نتائج Google وفي علامة التبويب
- <“meta name=”description>: وصف قصير يظهر تحت العنوان في نتائج البحث
- <“meta charset=”UTF-8>: تخبر المتصفح أن الصفحة تحتوي على نصوص عربية وشروط خاصة
- <style>: هنا تضع أوامر التنسيق (الألوان، الأحجام، المحاذاة)
ثالثاً: هيكل الصفحة الأساسي (البنية العامة)
كل صفحة ويب لها نفس البنية الأساسية. فكّر بها كقالب ثابت:
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<title>عنوان الصفحة</title>
<meta charset="UTF-8">
<style>
/* أوامر التنسيق هنا */
</style>
</head>
<body>
<!-- كل محتوى الصفحة يأتي هنا -->
<h1>عنوان مقالتك</h1>
<p>فقرات المقالة...</p>
</body>
</html>
ما معنى كل وسم:
- <!DOCTYPE html>: تخبر المتصفح أن هذا ملف HTML (يجب أن يكون في البداية)
- <html>: البداية والنهاية لكل الكود
- <head>: معلومات غير مرئية (العنوان، الوصف، التنسيق)
- <body>: كل المحتوى المرئي للقارئ
رابعاً: أدواتك اليومية – العناوين والفقرات والروابط
الآن بعد أن فهمنا الهيكل الأساسي، دعنا نركز على الأشياء التي ستستخدمها يومياً:
العناوين التراتبية (Headings)
العناوين لها 6 مستويات: من h1 (الأكبر) إلى h6 (الأصغر):
<h1>هذا العنوان الرئيسي الأكبر</h1> <h2>هذا عنوان فرعي</h2> <h3>هذا عنوان أصغر متفرع من الثاني</h3> <h4>عنوان أصغر</h4> <h5>عنوان أصغر جداً</h5> <h6>الأصغر من الجميع</h6>
نصيحة مهمة: استخدم عنوان واحد فقط h1 في كل صفحة (عنوان المقالة الرئيسي). ثم استخدم h2 و h3 للعناوين الفرعية. هذا يساعد محركات البحث على فهم هيكل مقالتك.
الفقرات (Paragraphs)
كل جملةٍ أو مجموعة جملٍ تشكل فقرة يجب أن تكون داخل وسم p:
<p>هذه فقرة أولى تتحدث عن موضوع معين.</p> <p>هذه فقرة ثانية مختلفة تماماً.</p> <p>فقرة ثالثة مع <strong>كلمة سميكة</strong> وكلمة <em>مائلة</em>.</p>
لاحظ: يمكنك وضع تنسيق داخل الفقرة (مثل سميك bold ومائل italic) باستخدام الوسوم الداخلية.
الروابط (Links)
الروابط تسمح للقارئ بالانتقال إلى صفحة أخرى:
<!-- رابط عادي --> <a href="https://zyyazan.sy">اضغط هنا للذهاب لموقع ذي يزن</a> <!-- رابط يفتح في نافذة جديدة --> <a href="https://example.com" target="_blank">اضغط لفتح في تبويبة جديدة</a> <!-- رابط داخلي بدون https --> <a href="/article-name">اقرأ المقالة الأخرى</a>
المعايير الاحترافية للروابط:
- أضف
target="_blank"إذا كنت تريد فتح الرابط في نافذة جديدة - أضف
rel="noopener"لأسباب أمان إذا كنت تستخدم target=”_blank” - اجعل نص الرابط واضحاً (بدل “اضغط هنا”، استخدم “دليل SEO الكامل”)
<!-- الطريقة الصحيحة --> <a href="https://example.com" target="_blank" rel="noopener">اقرأ دليل SEO الكامل</a>
الصور (Images)
الصور تُضاف بوسم خاص يُدعى img:
<!-- صورة بسيطة --> <img src="image.jpg" alt="وصف الصورة"> <!-- صورة برابط --> <img src="/images/photo.png" alt="صورة توضيحية"> <!-- صورة بحجم محدد --> <img src="image.jpg" alt="وصف" width="300" height="200">
ملاحظات مهمة عن الصور:
- src: مسار الصورة (حيث توجد الصورة على الموقع)
- alt: وصف الصورة (مهم جداً للـ SEO والأشخاص الذين يستخدمون قارئات الشاشة)
- استخدم صور مضغوطة (PNG أو JPG) لتسريع التحميل
- لا تستخدم أبداً alt=”” (فارغ) – دائماً اكتب وصف معنى
خامساً: التنسيق والتمييز – جعل النص أكثر وضوحاً
الآن نأتي إلى أشياءٍ تجعل مقالتك تبدو أفضل:
النصوص السميكة والمائلة
<!-- نص سميك (Bold) --> <strong>هذا النص سميك وجريء</strong> أو <b>هذا أيضاً سميك</b> <!-- نص مائل (Italic) --> <em>هذا النص مائل وحساس</em> أو <i>هذا أيضاً مائل</i> <!-- يمكنك دمجهما --> <strong><em>نص سميك ومائل في نفس الوقت</em></strong>
الفرق بين strong و b: من الناحية البصرية، كلاهما يجعل النص سميكاً. لكن strong يخبر محركات البحث أن هذا النص مهم معنوياً، بينما b يعني “غامق بصري فقط”. استخدم strong في معظم الأوقات.
تمييز جزء من النص (Span)
إذا أردت تلوين أو تنسيق جزء صغير من النص فقط:
<p>هذا نص عادي <span style="color: red;">وهذا النص أحمر</span> ونعود للعادي.</p> <!-- مع لون خلفية --> <span style="background-color: yellow; padding: 5px;">هذا نص مميز بخلفية صفراء</span>
الاقتباسات (Blockquote)
لكل اقتباس أو ملاحظة مهمة:
<blockquote style="border-right: 3px solid #1a2e5e; padding-right: 12px; color: #1a2e5e;"> هذا اقتباس مهم يريد أن يميزه عن باقي النص </blockquote> <!-- أو استخدم div بدل blockquote --> <div style="color: #1a2e5e; font-style: italic; border-right: 3px solid #1a2e5e; padding-right: 12px;"> هذه ملاحظة مهمة في صندوق مميز </div>
سادساً: القوائم – ترتيب البيانات بشكل منطقي
القوائم تجعل المعلومات أسهل للقراءة والفهم. هناك نوعان:
القوائم المرتبة (Ordered Lists)
عندما يكون الترتيب مهماً (خطوات متسلسلة):
<ol> <li>الخطوة الأولى: افتح المحرر</li> <li>الخطوة الثانية: اكتب المحتوى</li> <li>الخطوة الثالثة: راجع وصحح</li> <li>الخطوة الرابعة: انشر</li> </ol>
النتيجة: ستظهر كقائمة مرقمة 1، 2، 3، 4 بدلاً من أن تكتبها يدوياً.
القوائم غير المرتبة (Unordered Lists)
عندما يكون الترتيب غير مهم (عناصر عشوائية):
<ul> <li>أداة Grammarly للتصحيح النحوي</li> <li>Canva لتصميم الصور</li> <li>Google Analytics لتحليل البيانات</li> <li>WordPress للتدوين</li> </ul>
النتيجة: قائمة بنقاط (bullet points) بدل أرقام، في المحرر المرئي تنتج عند ضغطنا للنجمة أول السطر ثم مسافة .
قوائمٌ متداخلة
يمكنك وضع قائمةٍ داخل قائمة:
<ol>
<li>أدوات الكتابة
<ul>
<li>Grammarly</li>
<li>Hemingway App</li>
</ul>
</li>
<li>أدوات التصميم
<ul>
<li>Canva</li>
<li>Figma</li>
</ul>
</li>
</ol>
سابعاً: الجداول – عرض البيانات المعقدة
عندما تريد عرض بيانات في صفوف وأعمدة:
<table dir="rtl" style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="background-color: #f0f0f0;">
<th style="border: 1px solid #ddd; padding: 10px;">الاسم</th>
<th style="border: 1px solid #ddd; padding: 10px;">الوظيفة</th>
<th style="border: 1px solid #ddd; padding: 10px;">الراتب</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #ddd; padding: 10px;">سامي</td>
<td style="border: 1px solid #ddd; padding: 10px;">مدوّن</td>
<td style="border: 1px solid #ddd; padding: 10px;">$5,000</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 10px;">ليا</td>
<td style="border: 1px solid #ddd; padding: 10px;">مصممة</td>
<td style="border: 1px solid #ddd; padding: 10px;">$4,500</td>
</tr>
</tbody>
</table>
شرح الوسوم:
- <table>: بداية ونهاية الجدول
- <thead>: رأس الجدول (حيث توضع أسماء الأعمدة)
- <tbody>: جسم الجدول (حيث توضع البيانات)
- <tr>: صف واحد (Table Row)
- <th>: خانة رأس (Table Header)
- <td>: خانة بيانات عادية (Table Data)
نصيحة: أضف "dir="rtl للجدول إذا كنت تكتب بالعربية لضمان ظهور الجداول بالشكل الصحيح.
ثامناً: النماذج البسيطة (Forms)
إذا أردت أن يترك القارئ تعليقاً أو يملأ استبياناً:
<form> <label for="name">الاسم الكامل:</label> <input type="text" id="name" name="name" required> <label for="email">البريد الإلكتروني:</label> <input type="email" id="email" name="email" required> <label for="message">رسالتك:</label> <textarea id="message" name="message" rows="5"></textarea> <button type="submit">إرسال</button> </form>
أنواع الـ input الشائعة:
<!-- نص عادي --> <input type="text"> <!-- بريد إلكتروني --> <input type="email"> <!-- كلمة مرور --> <input type="password"> <!-- رقم --> <input type="number"> <!-- تاريخ --> <input type="date"> <!-- checkbox --> <input type="checkbox"> <!-- radio button --> <input type="radio">
تحدي الاتجاه: السر في خاصية واحدة (DIR)
هذا هو التحدي الحقيقي الذي يواجهه كل مدوّنٍ عربي.
تخيل أنك كتبت مقالةً في قالبٍ أجنبي أو منصةٍ لا تدعم العربية بشكلٍ كامل. تفتح الصفحة فتجد:
- النص محاذياً لليسار بدلاً من اليمين
- علامات الترقيم تظهر في البداية بدلاً من النهاية
- الجداول مقلوبةً
- الأرقام في مكانٍ خاطئ
الحل لكل هذا يكمن في خاصيةٍ واحدةٍ وحيدة تسمى dir (Direction):
<!-- لجعل قسم محدد يكتب من اليمين لليسار (RTL) --> <div dir="rtl"> هذا النص سيظهر بجهة اليمين دائماً وبترتيب صحيح. العلامات ستكون في الأماكن الصحيحة. </div> <!-- لجعل الصفحة بالكاملة بالاتجاه الصحيح --> <html dir="rtl" lang="ar"> <!-- كل المحتوى هنا سيكون RTL افتراضياً --> </html>
ما الذي يفعله “dir=”rtl؟
- ✓ يجعل النص يبدأ من اليمين
- ✓ يعيد ترتيب العناصر بشكلٍ صحيح
- ✓ يصحح موضع علامات الترقيم والأرقام
- ✓ يضبط محاذاة الجداول والقوائم
- ✓ يخبر محركات البحث أن النص عربي
أضف دائماً "lang="ar بجانب dir="rtl" لأسبابٍ أخرى تتعلق بسهولة الاستخدام والوصول (Accessibility).
تاسعاً: الأخطاء الشائعة وكيفية تجنبها
1. نسيان علامات الإغلاق
❌ خطأ: <p>هذه فقرة بدون إغلاق <p>فقرة أخرى ✓ صحيح: <p>هذه فقرة</p> <p>فقرة أخرى</p>
2. استخدام علامات خاطئة
❌ خطأ: <b>هذا مهم جداً</b> ✓ صحيح (أفضل): <strong>هذا مهم جداً</strong>
3. نسيان alt في الصور
❌ خطأ: <img src="photo.jpg"> ✓ صحيح: <img src="photo.jpg" alt="صورة توضيحية لأداة التدوين">
4. عدم استخدام أكثر من h1 واحد
❌ خطأ: <h1>عنوان المقالة</h1> ... <h1>عنوان فرعي آخر</h1> ✓ صحيح: <h1>عنوان المقالة</h1> ... <h2>عنوان فرعي</h2>
عاشراً: أدواتٌ تساعدك في الكود
لا تحتاج أن تحفظ كل شيء. هناك أدوات تساعدك:
- W3C HTML Validator: تفحص أخطاء الكود وتخبرك بالمشاكل
- HTML Formatter: تنظم الكود بشكلٍ صحيح
- DevTools في المتصفح: اضغط F12 واختر “Inspector” لترى الكود الفعلي
- محرر مثل Visual Studio Code: يساعدك في كتابة الكود بسهولةٍ ويصحح الأخطاء
الخلاصة: أنت الآن تملك المفاتيح
إن لغة HTML ليست عائقاً بل هي الممكّن الذي يمنحك السيادة الكاملة على نصك.
كسر الرهبة يبدأ بالتجربة. في مقالتك القادمة، حاول أن تكتب فقرةً واحدةً يدويّاً عبر محرر الكود، لن تحتاج أكثر من 5 دقائق.
ستدرك أن الرموز التي كانت تخيفك هي في الواقع خدمٌ مطيعون لأفكارك. كلما أتقنت استخدامهم، كلما اكتشفت حريةً إبداعيةً لم تكن تعرفها وجودها.
التجربة العملية أهم من المعرفة النظرية. افتح محرر كودٍ الآن، انسخ أحد الأمثلة من هذا الدليل، وجرّب تعديله. هذا هو الطريق الحقيقي للتعلم.
المراجع والموارد:
- W3Schools HTML Tutorial — دليل شامل بالإنكليزية
- W3C HTML Validator — فحص وتصحيح أخطاء الكود
- HTML Formatter — تنظيم وتنسيق الكود
- Visual Studio Code — محرر كود احترافي (مجاني)
- MDN Web Docs – HTML — مرجع تقني شامل
ملاحظة نهائية: هذا الدليل يغطي الأساسيات فقط. HTML لغة واسعة جداً، لكن هذه الأدوات التي تعلمتها تغطي 80% من احتياجات المدوّن اليومية.
