sábado, 20 de fevereiro de 2010

Como enfatizar um termo ou uma frase em seus textos


Muitas vezes, ao escrevermos um texto, queremos dar uma ênfase à uma determinada palavra ou frase. Geralmente fazemos isso colocando os atributos negrito e itálico, usando as tags <b> e <i>, respectivamente, ou até mesmo colocamos uma cor diferente ao do texto, ou uma cor de fundo, procedimentos estes feitos a partir do editor de textos do Blogger e/ou Wordpress.

As tags acima mencionadas possuem apenas um valor visual, que em nada acrescentam ao texto. Mas se você quiser um texto forte e/ou enfatizado mesmo, deve usar as tags <strong> no lugar de <b> e <em> no lugar de <i>.

A tag <strong> define um texto forte:

O Cidão é lindo demais!

A tag <em> define um texto com ênfase:

O Cidão é lindo demais!

A última frase, além de estar enfatizada, está com um fundo amarelo. Em alguns posts, eu vinha enfatizando algumas frases com a cor de fundo amarela, como se fosse um marcador de texto. Eu não usei o editor de posts, eu apenas tinha ativado a tag em no meu template por meio de um CSS, assim, toda vez que eu fosse enfatizar uma frase ou palavra, essa tag era usada.

A ativação dessa tag foi feita a partir do código abaixo colocado antes da tag ]]>>/b:skin>, no template.

Exemplo de uma regra em CSS:
em {
background: #FFFF00; /* cor do fundo, coloquei amarelo que é a cor padrão dos marcadores de texto */ 
color: #000000; /* cor do texto, caso queira colocar uma cor diferente, consulte uma tabela de cores, ou simplesmente apague esse comando e mantenha a cor original */ 
font-style: normal; /* Eis o diferencial da tag em, você pode mudar o estilo da fonte, que geralmente vem como itálico, se você quiser pode enfatizar usando outro comando: normal ou oblique. Caso queira deixar em italic, esse comando é desnecessário (pode apagar)*/ 
}

Obs.1:Tabela de cores HTML

Obs.2: O texto entre esses símbolos /*--texto--*/ denotam comentários que estou fazendo sobre cada comando no CSS, podem posteriormente ser apagados.

Para achar a tag ]]>>/b:skin>, vá em painel de controle >> Layout >> Editar HTML >> marcar Expandir modelos de widgets e use control+F.

Como usar a tag? Muito simples, use-a da mesma maneira que você usa <b>, <i>, <p> ou qualquer outra tag no editor de textos com o modo HTML.

Vou usar como exemplo uma frase que a Du tinha soltado em seu twitter, de Oscar Wilde, várias semanas atrás:

* Um homem pode viver feliz com qualquer mulher desde que não a ame. Oscar Wilde

Quero enfatizar e fortalecer "desde que não a ame", logo, escrevo:

* Um homem pode viver feliz com qualquer mulher <em><strong>desde que não a ame</strong></em>. Oscar Wilde

Portanto a frase fica assim:

* Um homem pode viver feliz com qualquer mulher desde que não a ame. Oscar Wilde

Simples, não? Sei que pode aparecer alguém dizendo que não vê diferença em usar em ou i, ou strong ou b, e que esses efeitos podem ser obtidos da barra de ferramentas do editor de textos no modo composto, geralmente eu uso sempre o modo HTML porque sinto mais liberdade para formatar os meus textos, e também porque saber usar os códigos e comandos é imprescindível quando você quer realmente estilizar os seus textos.

Uma excelente fonte de informação sobre HTML e CSS é o site do Maujor, geralmente é de lá que acabo aprendendo essas linguagens.

E lembre-se, o HTML5 vem aí!

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google