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:
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.
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.
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>:
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 HouseGoó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:
]]></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
Oi Nanda, conheci o htmhelen no ferramentas, de cara já gostei. Muito legal.
ResponderExcluirEstarei acompanhando e aprendendo, adorei seu trabalho.
Olá, Boa noite!
ResponderExcluirAntes de mais nada eu quero lhe parabenizar pelo site que realmente é NOTA 10, o Htmhelen é um referencial, principalmente para quem esta començando um site ou blog. Que é o meu caso!
Bom eu tenho um Blogspot e gostaria de saber se tem como colocar um tutorial sobre CAIXA DE DESCRIÇÃO (BLOCO DE TEXTO) NO TÍTULO DO POST?
É tipo assim quando passamos o ponteiro do mouse no Título do Post logo em seguida exibe essa caixinha de descrição. Entendeu? É isso.
Desde já eu agradeço, muito obrigado!
Atc.: Leandro
P.S.: Sucesso Sempre!!! :)