الدرس الأول: التنسيق باستخدام وسوم HTML

يقوم هذا الدرس على تحويل النصوص العادية في صفحات الويب إلى نصوص منسقة تجذب الانتباه عبر استخدام وسوم HTML الخاصة بالتنسيق. ترتكز الفكرة على احاطة النص المراد تنسيقه بوسم فتح ووسم إغلاق مثل وضع النص بين وسمي التغميق لتحويله إلى خط غامق. يغطي الدرس أيضاً تنسيق الصور عبر تحديد الابعاد وإضافة الحدود والخصائص البديلة، بالإضافة إلى تنسيق مقاطع الفيديو بخصائص التحكم التلقائي وكتم الصوت. على سبيل المثال، لكتابة كلمة بخط مرتفع يشبه الأسس الرياضية، يوضع النص بين وسمي الفتح والإغلاق الخاصين بالارتفاع كما في $x ²$. المبالغة في استخدام هذه التنسيق بشكل عشوائي تؤدي إلى مظهر غير جيد للصفحة.

الفكرة الأساسية

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

الشرح

لدينا مجموعة واسعة من الوسوم المخصصة لتنسيق النصوص. لتغميق الخط نستخدم وسم البداية والنهاية، ولإمالة النص نستخدم وسماً آخر، ولتسطير النص نستخدم وسماً ثالثاً. إذا أردت تصغير حجم النص عن الافتراضي أو تكبيره، توجد وسوم مخصصة لذلك مثل وسوم التكبير والتصغير. لتمييز النص بخلفية صفراء تشبه قلم التحديد نستخدم وسماً خاصاً، ولإظهار خط في منتصف النص نستخدم وسم الشطب.

في الرياضيات والعلوم تحتاج أحياناً إلى كتابة حروف بخط منخفض أو مرتفع، وهنا يأتي دور وسومي العرض بخط منخفض أو مرتفع. أما للتحكم الدقيق بحجم الخط ونوعه ولونه، فيتم استخدام وسم تنسيق الخط مع خصائص محددة مثل تحديد نوع الخط، وحجم الخط بقيم رقمية صحيحة من واحد إلى تسعة حيث يمثل واحد القيمة الأصغر وتسعة القيمة الأكبر، ولون الخط عبر كتابة اسم اللون أو رمزه البرمجي.

في جانب الصور، يمكنك إضافة حدود للصورة عبر خاصية الحدود مع إعطائها قيمة مناسبة، وإضافة خاصية البديل لضمان ظهور وصف نصي إذا تعذر تحميل الصورة ولتكون مناسبة لمحركات البحث.

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

مثال محلول خطوة بخطوة

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

أخطاء شائعة

نسيان إغلاق الوسم بعد الانتهاء من كتابة النص المراد تنسيقه. المبالغة في إضافة التنسيقات على النصوص والصور بشكل مفرط، مما يؤدي إلى نتائج عكسية تجعل الصفحة تظهر بشكل غير جيد. محاولة استخدام خاصية التشغيل التلقائي للفيديو بمفردها دون إرفاق خاصية كتم الصوت معها.

سؤالان للتدريب مع الإجابة

السؤال الأول: كيف تكتب نصاً بخط غامق باستخدام وسوم HTML؟ الإجابة: يتم وضع النص المراد تغميقه بين وسم الفتح ووسم الإغلاق الخاص بالتغميق. السؤال الثاني: ما هي الخاصية المستخدمة لإضافة حدود حول الصورة في لغة HTML؟ الإجابة: تستخدم خاصية الحدود داخل وسم الصورة مع إعطائها قيمة مناسبة للسمك.