التنسيق باستخدام وسوم HTML | الوحدة الثالثة | الدرس الأول
التنسيق باستخدام وسوم HTML هو عنوان الدرس الأول من الوحدة الثالثة التي تحمل اسم “البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي” في الفصل الدراسي الأول من مقرر “تقنية رقمية 2”.
سنتعرف في هذا الموضوع على كيفية استخدام وسوم تنسيق النص، وتنسيق الصورة في HTML؛ لتنسيق الصفحات الإلكترونية.
التنسيق باستخدام وسوم HTML
لذا قم بقراءة نواتج التعلُّم بعناية، ثم أعد قراءتها وتأكَّد من تحصيل محتواها بعد انتهائك من دراسة الموضوع.
نواتج التعلُّم
- تنسيق النصوص باستخدام الوسوم في HTML.
- تنسيق الصور باستخدام الوسوم في HTML.
- تنسيق عرض ملفات الفيديو باستخدام الوسوم في HTML.
هيا لنبدأ!
مقدمة – التنسيق باستخدام وسوم HTML
تعلَّّمت في الصف الأول الثانوي لغة ترميز النص التشعبي (HTML) وكيفية استخدام وسوم HTML لإنشاء صفحة إلكترونية بسيطة، بينما ستتعلَّم في هذا الموضوع كيفية استخدام وسوم HTML لتنسيق صفحتك الإلكترونية، حيث إن المتصفح يَستخدِم تنسيقًا افتراضيًّا خاصًا به.
لمعرفة المزيد من المعلومات عن لغة ترميز النص التشعبي (HTML)، قم بالاطّلاع على الرابط التالي:
تنسيق النص
هناك بعض الوسوم الخاصة التي يمكِنك استخدامها لتنسيق مظهر النص على صفحتك الإلكترونية، وتتطلَّب كتابة النص الذي تريد تنسيقه بين الوسمين المقابلين.
أمثلة على بعض هذه الوسوم:
التنسيق باستخدام وسوم HTML
لاحظ أن
المبالغة في التنسيقات على النصوص في صفحتك الإلكترونية قد يؤدي إلى نتيجة عكسية تجعل صفحتك تظهر بشكل غير جيد.
التنسيق باستخدام وسوم HTML
بإمكانك مراجعة محتوى الموضوع من بدايته وحتى هذه النقطة، ومن خلال الرابط التالي:
لاحظ أن
يمكِنك الحصول على المقطع البرمجي لللون (مصادر الأكواد) لصفحتك الإلكترونية من الموقع: https://colorcodeshtml.wikiforschool.com
حيث تجد أسماء الألوان في HTML ودرجات الألوان RGB وكذلك رموزها Hex.
بإمكانك مراجعة محتوى الموضوع من بدايته وحتى نهاية هذا القسم، من خلال الرابط التالي:
تنسيق الصورة
بإمكانك أيضًا استخدام وسوم لتنسيق صور الصفحة الإلكترونية الخاصة بك.
حدود الصورة
لإضافة حدود حول صورتك، استخدم خاصية border مع إعطائها قيمة مناسبة في وسم img.
خاصية البديل (alt)
خاصية البديل (alt) مهِمَّة جدًا، حيث يمكِنك إضافتها في وسم الصورة، وتعدُّ مناسبة لمحركات البحث، ويتم استخدامها لعرض نص بديل يصف الصورة بالكلمات إذا تعذَّر تحميلها.
تنسيق عرض ملف الفيديو
يمكِنك أيضًا استخدام الوسوم لتنسيق عرض ملف الفيديو في الصفحة الإلكترونية الخاصة بك.
- خاصية التشغيل التلقائي (Autoplay attribute)
عند إضافة خاصية التشغيل التلقائي إلى وسم الفيديو، سيبدأ تشغيل الفيديو تلقائيًّا.
لاحظ أن
خاصية التشغيل التلقائي لا تعمل إذا لم يكن معها خاصية كتم الصوت.
- خاصية كتم الصوت (Muted attribute)
عند إضافة خاصية كتم الصوت إلى وسم الفيديو، سيتم كتم الصوت عند تشغيل الفيديو.
بإمكانك مراجعة محتوى الموضوع من بدايته وحتى نهايته، من خلال الرابط التالي:
إلى هنا يكون قد انتهى موضوع “التنسيق باستخدام وسوم HTML“، لا تنسوا مراجعة نواتج التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!