Мы собираемся использовать в качестве примера шаблон электронной почты, созданный в предыдущем учебнике, но данные принципы так же применимы и к браузерному веб-дизайну.
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230"style="display: block;" />
Понятно, что альтернативный текст непривлекателен — особенно ссылки. Но кое-что мы можем с ним сделать. В основном заголовке мы сильно увеличим текст и сделаем его темно-синим вместо черного. Для этого нужно добавить родительскому элементу (в данном случае ячейке) стили. Они же затем будут применены к тэгам alt внутри этой ячейки. Вот она:
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230"style="display: block;" />
</td>
Назначим стили тексту, чтобы он смотрелся так:
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;">
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230"style="display: block;" />
</td>
И определим стили ссылкам социальных сетей, чтобы те стали белыми:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
<a href="http://www.twitter.com/" style="color: #ffffff;">
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
<a href="http://www.twitter.com/" style="color: #ffffff;">
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
Так просто! Теперь можно быть уверенным, что адрес электронной почты будет красиво отображаться даже при выключенных изображениях.
Автор: Nicole Merlin
Источник:
http://webdesign.tutsplus.com/