Nível: iniciante
Esses são dois recursos muito simples e ao mesmo tempo muito importantes para a usabilidade de seu site. Estamos falando dos atributos alt e title, tantas vezes esquecidos por webmasters e blogueiros.
Texto alternativo em imagens
Como o próprio nome sugere, o texto alternativo (atributo alt) é exibido no lugar da imagem quando a mesma não pode ser carregada. Nesse atributo coloque a palavra que resume a imagem. Quando essa imagem apontar para um outro site, coloque o nome do site no campo alt.
Abaixo segue um exemplo de utilização desse recurso. À esquerda aparece a imagem que desejo exibir. À direita simulei um erro de carregamento de imagem. Como ela não abriu, aparece o texto que coloquei no campo alt:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Gatinho'>
Neste outro exemplo, a minha imagem é um link, então vou facilitar a vida do leitor colocando no campo alt o nome do site, porque é isso que eu quero que ele veja se a imagem não carregar.
<a target='_blank' href='http://pink.helenfernanda.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Helen Fernanda Pink'></a>
Descrição em imagens
A descrição é feita com o atributo title. O texto da descrição aparece quando você passa o mouse sobre a imagem.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif" alt='Gatinho' title='Gatinho'>
Navegadores
Quando a imagem não tem o atributo title, o Internet Explorer (e somente ele) exibe o texto que está no campo alt quando o cursor está sobre a imagem, mesmo que ela tenha sido carregada normalmente.
Descrição em links
|
Helen Fernanda Pink
|
<a target='_blank' href='http://pink.helenfernanda.com' title='Meu site cor-de-rosa com assuntos de mulherzinha'>Helen Fernanda Pink</a>
|
Quando a imagem for um link, coloque alt na tag <img> e title na tag <a>:
<a target='_blank' href='http://pink.helenfernanda.com'
title='Helen Fernanda Pink'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aMa416_ULuGw5aItuJ38PzWUUY5WvbiL7xyI_iBNw_vHBPPXJM7pbwwjESY-ZA4ldDQYVeKsAaNtZ5LeZz62j5TPanaEPsYGMtaR3MqY4DViHyZa0nwla3wk4SaoS5mM-r1ZLhkbflpZ/s144/me_voy.gif"
alt='Helen Fernanda Pink'></a>
Descrição em texto
Em HTML as tags que precisam de descrição são <abbr> (abreviatura) e <acronym> (sigla):
Pe. Inácio - Cel. Cardoso
HTML - CSS
|
<abbr title="Padre">Pe.</abbr> Inácio - <abbr title="Coronel">Cel.</abbr> Cardoso - <acronym title="HyperText Markup Language">HTML</acronym> - <acronym title='Cascading Style Sheets'>CSS</acronym>
|
Porém, title é um atributo que pode ser utilizado na maioria das tags:
White House Goóc - Nanda
|
<h4 title="Casa Branca">White House</h4> - <i title="Marca de calçados feitos de pneu reciclado">Goóc</i> - <b title="Meu principal apelido">Nanda</b>
|
Na folha de estilos
Nível: intermediário
Para que o leitor saiba que tal palavra ou expressão tem uma descrição, é recomendado que você crie uma identificação na folha de estilos. Vou dar um exemplo, observe o código:
#temdes {cursor:crosshair; border-bottom:1px dashed #cccccc;}
]]></b:skin>
Neste exemplo, sempre que eu colocar title em um texto vou usar id='temdes' para que o mesmo apareça diferenciado, com o cursor em forma de cruz e um sublinhado riscado cinza. Assim, o leitor que estiver habituado ao meu blog, saberá sempre que um texto tiver descrição.
|
<span id='temdes' title='Filme nacional'>Meu Tio Matou um Cara</span>
| Meu Tio Matou um Cara
|
|
<i id='temdes' title='Meu blog pessoal'>Helen Fernanda Ponto Com</i>
| Helen Fernanda Ponto Com
|
Faça bom uso!
Imagem do site Bubbaloo Brigadeiro
