() translation by (you can also view the original English article)
السمة alt داخل وسم <img> توفر للمحتوى نص بديل للمستخدمين الذين لا يمكنهم تحميل الصور، أو الذين قاموا بايقاف عرض الصور. سنستخدم هذه السمة طوال الوقت لجعل المحتوى أكثر سهولة، ولكن هل فكرت يوما كيف يبدو؟
سنستخدم قالب البريد الإلكتروني الذي اعددناه في درس سابق كمثال، ولكن المبادئ تنطبق كذلك على التصميم للقالب.
1 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
إذا القينا نظرة على الملف الذي لدينا بعد القيام إيقاف تشغيل الصور، فهذا هو ما يبدو:
النص البديل غير جذاب – لا سيما في حالة الروابط. يمكننا أن نفعل بعض الاشياء الصغيره لتزيينه.
بالنسبة للعنوان الرئيسي سنجعل النص أكبر بكثير ونغير لونه إلى الأزرق الداكن بدلاً من الأسود. سنقوم بهذا عن طريق إضافة استيل إلى العنصر الأصلي (في حالة هذه الخلية). ثم سيتم تطبيق الاستيل على نص alt داخل الخلية.
هذه هي الخلية:
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
سنقوم بإضافة استيل للنص حتى يبدو مثل هذا:
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
سوف نضيف استيل لروابط السوشيال ميديا لكي يصبح اللون أبيض:
1 |
<table border="0" cellpadding="0" cellspacing="0"> |
2 |
<tr>
|
3 |
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> |
4 |
<a href="http://www.twitter.com/" style="color: #ffffff;"> |
5 |
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> |
6 |
</a>
|
7 |
</td>
|
8 |
<td style="font-size: 0; line-height: 0;" width="20"> </td> |
9 |
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> |
10 |
<a href="http://www.twitter.com/" style="color: #ffffff;"> |
11 |
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> |
12 |
</a>
|
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
بسيطة! الآن يمكن أن تطمئن بأن البريد الإلكتروني سيتم عرضه بشكل جيد، حتى مع اختفاء الصور.
