Mabilis na Tip: Tandaang Iistilo ang Inyong ALT na Teksto

Ang alt na katangian sa loob ng <img> tatak ay nagbibigay ng alternatibong nilalaman para sa mga gumagamit na hindi makapagdownload ng mga larawan, o may mga larawang nakapatay ng lahatan. Gumagamit tayo ng katangiang ito sa lahat ng oras upang gawing mas nararating ang ating nilalaman, ngunit naisaalang-alang ba ninyo kailanman kung ano talaga ang hitsura nito?

Gagamitin nating ang template ng email na ginawa natin bilang halimbawa sa nakaraang tutoryal, ngunit ang mga prinsipyo ay ginagamit pa din sa nakabase sa browser na disenyo ng web.

1

<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

Kung titingnan natin an gating file na may mga larawang nakapatay, ganito ang hitsura nito:

Maliwanag na ang ALT na teksto ay hindi kaakit-akit — lalo na sa mga link.  Maaari tayong gumawa ng ilang mga bagay upang ijazz ito.

Para sa pangunahing pamagat, gagawin nating mas malaki ang teksto at papalitan ito ng ating matingkad na asul sa halip na itim.  Gagawin natin ito sa pamamagitan ng pagdadagdag ng mga istilo sa magulang na element (sa kasong ito ay cell).  Ang mga istilong ito ay gagamitin sa mga alt na mga tatak sa loob ng cell na iyon.

Ito ang ating cell:

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>

Magdadagdag tayo ng ilang mga pag-iistilo ng teksto kaya ito ay ganito ang hitsura:

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>

At iistiluhan natin ang ating social media na mga link upang ang mga ito ay maging puti:

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">&nbsp;</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>

Ganyan kadali!  Ngayon maaari na tayong magtiwala na an gating email ay maipapakita ng maayos, kahit na nakapatay ang mga larawan.