Busca

Carregando...

domingo, 8 de fevereiro de 2009

Tags inline que mudam o texto

Nível: iniciante
Borboleta
Melhore seu blog com simplicidade…

Já escrevi aqui sobre a diferença entre block e inline. Neste post vou dar exemplos com as tags inline, que são muito úteis na edição de qualquer texto HTML, inclusive blogs:

Negrito

Código:

Com a tag b o texto fica <b>negrito</b>.

Ou ainda:

Com a tag strong o texto fica <strong>negrito</strong>.

Resultado:

Com a tag b o texto fica negrito.

Citação*

Código:

Com a tag q o texto fica <q>entre aspas</q>.

Resultado:

Com a tag q o texto fica entre aspas.

* Não funciona no Internet Explorer.

Itálico

Código:

Com a tag cite o texto fica <cite>itálico</cite>.
Com a tag em o texto fica <em>itálico</em>.
Com a tag i o texto fica <i>itálico</i>.
Com a tag var o texto fica <var>itálico</var>.
Com a tag dfn* o texto fica <dfn>itálico</dfn>.

Resultado:

Com a tag i o texto fica itálico.

* <dfn> não funciona no Chrome, nem no Safari.

Riscado

Código:

Com a tag del o texto fica <del>riscado</del>.
Com a tag s o texto fica <s>riscado</s>.
Com a tag strike o texto fica <strike>riscado</strike>.

Resultado:

Com a tag s o texto fica riscado.

Sublinhado

Códigos:

Com a tag ins o texto fica <ins>sublinhado</ins>.
Com a tag u o texto fica <u>sublinhado</u>.

Resultado:

Com a tag u o texto fica sublinhado.

Monoespaçado

Códigos:

Com a tag code o texto fica <code>monoespaçado</code>.
Com a tag kbd o texto fica <kbd>monoespaçado</kbd>.
Com a tag samp o texto fica <samp>monoespaçado</samp>.
Com a tag tt o texto fica <tt>monoespaçado</tt>.

Resultado:

Com a tag code o texto fica monoespaçado.

Tamanho do texto

Códigos:

Com a tag small o texto fica <small>menor</small> do que estava antes.
Com a tag big o texto fica <big>maior</big> do que estava antes.

Resultado:

Com a tag small o texto fica menor do que estava antes.

Com a tag big o texto fica maior do que estava antes.

Nível do texto

Código:

Com a tag sub o texto fica <sub>um nível abaixo</sub> do que estava antes.
Com a tag sup o texto fica <sup>um nível acima</sup> do que estava antes.

Resultado:

Com a tag sub o texto fica um nível abaixo do que estava antes.

Com a tag sup o texto fica um nível acima do que estava antes.

Sentido do texto

Código:

Com a tag bdo dir="ltr" o texto fica <bdo dir="ltr">da esquerda para a direita</bdo>.
Com a tag bdo dir="rtl" o texto fica <bdo dir="rtl">da direita para a esquerda</bdo>.

Resultado:

Com bdo dir="ltr" o texto fica da esquerda para a direita.

Com bdo dir="rtl" o texto fica da direita para a esquerda.

<bdo dir="rtl"> inverte o texto para nós, ocidentais, que escrevemos da esquerda para a direita, enquanto <bdo dir="ltr"> serve para inverter textos árabes e hebraicos, por exemplo, que são escritos da direita para a esquerda.

Fonte, cor e tamanho

Código:

A tag font <font color="#ff00ff" size="4" face="comic sans ms">muda cor, tamanho e fonte</font> sem precisar de CSS.

Resultado:

A tag font muda cor, tamanho e fonte sem precisar de CSS.


Apesar de modificarem o texto sem precisar de CSS, todas essas tags podem ser personalizadas na folha de estilos de seu blog ou site para que fiquem do seu jeito.

Posts relacionados