От автора: атрибут alt внутри тэга img обеспечивает альтернативный контент для пользователей, которые не могут скачивать изображения, или тех, у кого они отключены. Мы все время пользуемся этим атрибутом, чтобы сделать свой контент более доступным, но вы задумывались когда-нибудь, как на самом деле это смотрится?
Мы собираемся использовать в качестве примера шаблон электронной почты, созданный в предыдущем учебнике, но данные принципы так же применимы и к браузерному веб-дизайну.
1 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
Вот как будет выглядеть файл с выключенными изображениями:
Понятно, что альтернативный текст непривлекателен — особенно ссылки. Но кое-что мы можем с ним сделать. В основном заголовке мы сильно увеличим текст и сделаем его темно-синим вместо черного. Для этого нужно добавить родительскому элементу (в данном случае ячейке) стили. Они же затем будут применены к тэгам alt внутри этой ячейки. Вот она:
1 2 3 |
<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> |
Назначим стили тексту, чтобы он смотрелся так:
1 2 3 |
<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> |
И определим стили ссылкам социальных сетей, чтобы те стали белыми:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;"> <a href="//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="//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
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.