Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

درس سريع: تذكر أن تضيف استيل للنص البديل (ALT)

by
Length:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Consider Wrapping Your Code With a “figure” Element
Quick Tip: Set Relative URLs With the “base” Tag

Arabic (العربية/عربي) translation by Ali Atwa (you can also view the original English article)

السمة alt داخل وسم <img> توفر للمحتوى نص بديل للمستخدمين الذين لا يمكنهم تحميل الصور، أو الذين قاموا بايقاف عرض الصور. سنستخدم هذه السمة طوال الوقت لجعل المحتوى أكثر سهولة، ولكن هل فكرت يوما كيف يبدو؟

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

إذا القينا نظرة على الملف الذي لدينا بعد القيام إيقاف تشغيل الصور، فهذا هو ما يبدو:

altTagsBefore

النص البديل غير جذاب – لا سيما في حالة الروابط. يمكننا أن نفعل بعض الاشياء الصغيره لتزيينه.

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

هذه هي الخلية:

سنقوم بإضافة استيل للنص حتى يبدو مثل هذا:

سوف نضيف استيل لروابط السوشيال ميديا لكي يصبح اللون أبيض:

altTagsAfter

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.