HTML وCSS / الأساسيات / الدرس 1
المستندات والمتصفحات وسير عمل موثوق
افهم كيف يتحول محتوى HTML وتنسيق CSS إلى مستند قابل للاستخدام، وافحص نموذج المتصفح الفعلي بدلا من التخمين من المظهر.
في هذه الصفحة
أهداف الدرس
- فصل البنية عن العرض
- فحص صفحة صغيرة ذات معنى
- جعل الأدلة قابلة للتكرار
فصل البنية عن العرض
تصف HTML المحتوى والعلاقات، وتتحكم CSS في عرضه وفق قواعد التخطيط والرسم. ينقل العنوان معنى عنوان القسم قبل تنسيق خطه. تضيف JavaScript سلوكا لكنها ليست مطلوبة للروابط العادية وكثير من تفاعلات النماذج. تتعاون هذه الطبقات؛ فلا يصلح إطار أكثر سطوعا اسما ميسرا مفقودا. ابدأ بمحتوى واضح وعناصر ذات معنى ثم حسن التباعد والتخطيط. يسهل هذا الترتيب تحديد الفشل لأن المحتوى يبقى مفهوما عند غياب التنسيق أو تعذر تحميل مورد.
قالب مستند صريح
يختار تصريح doctype نمط المعايير في مستندات HTML الحديثة. يحدد html اللغة، ويحفظ head البيانات الوصفية، ويضم body المحتوى. يميز عنوان مفيد الصفحة في التبويبات والسجل. أعلن UTF-8 مبكرا لقراءة العربية وغيرها باتساق. تساعد بيانات viewport متصفح الهاتف في استخدام عرض التخطيط المناسب، لكنها لا تجعل تصميما ثابتا متجاوبا وحدها. يستطيع ملف محلي عرض محتوى ساكن، وقد تحتاج ميزات شبكية خادما محليا. تتجنب مستندات المقرر اعتماديات خارجية حتى تفحص دون خدمة.
فحص صفحة صغيرة ذات معنى
يضم المثال معلما رئيسيا وعنوان صفحة وفقرة. ترتيب المصدر مناسب للقراءة دون تنسيق. احفظ المستند كاملا وافحص المصدر ولوحة العناصر. يبني المتصفح شجرة DOM وقد يصلح التداخل الخاطئ، لذلك قد تختلف الشجرة عما كتبت. افحص الاختلاف ولا تعتبر ظهور الصفحة دليلا على صحة الترميز. يجيب التحقق وفحص المتصفح عن سؤالين مترابطين لكن مختلفين: مطابقة القواعد والسلوك الناتج.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Semantic document</title>
</head>
<body>
<main>
<h1>Workshop notes</h1>
<p>Build structure before presentation.</p>
</main>
</body>
</html>
A heading followed by an introductory paragraph.يحوي المعلم الرئيسي عنوانا وفقرة تمهيدية، وتكفي الأنماط الافتراضية لقراءته. النتيجة المتوقعة: عنوان تتبعه فقرة تمهيدية.
إضافة تنسيق مرئي صغير
يضيف المثال CSS داخل style ليبقى مستقلا. يختار main ويحدد حدا لعرض القراءة وهوامش داخلية تلقائية للمحاذاة. يمنع الحشو التصاق النص بحافة الشاشة، وتراعي الوحدات النسبية سياق التحجيم بدلا من جهاز محدد. تصف النتيجة العلاقات لا صورة متطابقة بين الأنظمة؛ فالخطوط والتفضيلات والتكبير تختلف. غير تصريحا واحدا وافحص القيمة المحسوبة والمطابقة والأولوية.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Readable document</title>
<style>
main { max-inline-size: 60ch; margin-inline: auto; padding: 1rem; }
</style>
</head>
<body>
<main><h1>Readable notes</h1><p>A bounded reading area can still shrink on a narrow screen.</p></main>
</body>
</html>
Content stays within a padded reading column.يحد الحد الأقصى الأسطر الطويلة مع السماح بالتقلص، ويضيف الحشو مساحة دون تثبيت عرض الشاشة. النتيجة المتوقعة: يبقى المحتوى داخل عمود قراءة ذي حشو.
جعل الأدلة قابلة للتكرار
سجل المستند وإصدار المتصفح والعرض والتكبير والتفضيلات المرتبطة عند الإبلاغ عن مشكلة. تعرض وحدة التحكم تشخيص الموارد، وتوضح الشبكة وصول التنسيق. يكشف المدقق خللا بنيويا لكنه لا يحكم على معنى النص البديل أو ملاءمة ترتيب لوحة المفاتيح. اختبر العرض الضيق والواسع مبكرا والتنقل بلوحة المفاتيح قبل تعقيد المكونات. استخدم بيانات محلية مصطنعة ولا ترسل نموذجا حقيقيا أو محتوى خاصا إلى مدقق خارجي.
الأخطاء الشائعة وإصلاحها
تظهر الصفحة بشجرة غير متوقعة
- لماذا يحدث؟
- أدى تداخل غير صالح إلى إصلاح من المحلل.
- كيف تصلحه؟
- افحص DOM وصحح بنية المصدر.
- كيف تتجنب تكراره؟
- تحقق من المستندات الصغيرة قبل دمجها.
تظهر العربية بصورة مشوهة
- لماذا يحدث؟
- اختلفت بايتات الملف عن الترميز المعلن.
- كيف تصلحه؟
- احفظ UTF-8 وأعلنه مبكرا.
- كيف تتجنب تكراره؟
- حدد الترميز في التحرير والتسليم.
تحتاج صفحة الهاتف إلى تمرير أفقي
- لماذا يحدث؟
- رافق viewport محتوى ثابت أو زائد العرض.
- كيف تصلحه؟
- افحص الأحجام واسمح بتخطيط مرن.
- كيف تتجنب تكراره؟
- اختبر المحتوى الضيق لا البيانات الوصفية وحدها.
اختبر فهمك
1. ما الذي يجب أن يبقى قابلا للاستخدام إذا غاب التنسيق؟
اعرض الحل المشروح
يجب أن تبقى العناوين والفقرات والروابط والعناصر الأصلية مفهومة. تحسن CSS ترتيبها لكن العلاقات يجب أن توجد في HTML. افحص الصفحة دون تنسيق لاكتشاف معنى نُقل باللون أو الموضع فقط.
2. صمم تقريرا مصغرا لتخطيط يختل بعد التكبير.
اعرض الحل المشروح
أرفق المستند المصغر والإصدار والعرض والتكبير والعلاقة المتوقعة والتجاوز الملحوظ. أعد الفحص بالإعدادات نفسها وحدد أول صندوق زائد. تساعد الصورة لكنها لا تعوض المصدر والإعدادات القابلة للتكرار.
أهم ما تعلمته
- تقدم HTML المعنى قبل تنسيق CSS.
- افحص DOM الناتج والأنماط المحسوبة.
- لا تكفي صورة ناجحة لإثبات قابلية الاستخدام.