domingo, fevereiro 08, 2009

👩‍💻 HTML | Elementos inline que mudam o texto

Atualizado dia 24 de maio de 2018.
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.

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>.

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

Com a tag code (código) o texto fica <code>monoespaçado</code>.

Com a tag code (código) o texto fica monoespaçado.



Com a tag kbd (keyboard - teclado) o texto fica <kbd>monoespaçado</kbd>.

Com a tag kbd (keyboard - teclado) o texto fica monoespaçado.



Com a tag samp (exemplo) o texto fica <samp>monoespaçado</samp>.

Com a tag samp (exemplo) 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.

Pix meutedio arroba mail ponto com

10 comentários:

  1. Anônimo9/2/09 11:27

    Helen,
    coincidentemente publicamos no mesmo dia o mesmo assunto.

    Mas, como o seus artigos são sempre mais completos e didáticos que os meus (rs!) coloquei um backlink no final do meu texto indicando a leitura do seu como complemento!

    Marcos Lemos

    ResponderExcluir
  2. Muito Bom o seu conteudo, sou iniciante em blog, e gostaria de algumas dicas, desde formatação de pagina, pois sou leigo em html, e tambem em qualquer assutndo que puder me ajudar, muito obrigado...

    ResponderExcluir
  3. Anônimo8/4/10 18:29

    Olá! Muito bom a postagem. É muito difícil manter um blog de qualidade, com uma cara mais profissional sem saber html e aqui em seu blog estou encontrando muitos artigos legais e estão muito me ajudando.
    Parabéms pelo trabalho ...

    ResponderExcluir
  4. Adorei Helen, eu que sempre gosto de mexer muito com HTML apesar de ser um pouco "jovem" pra isso...Excelente post.

    O jovem que quis dizer é 12 anos... =D

    ResponderExcluir
  5. Caio, nunca é cedo demais para começar a estudar uma nova linguagem. HTML é uma delícia, quando a gente leva jeito para a coisa não quer parar nunca mais. ;)

    ResponderExcluir
  6. muito boas as dicas, mas eu gostaria de saber como esconder um texto
    ex: eu escrevo a palavra amor e quando alguém clicar nela um textinho aparecerá abaixo e se clicar de novo, o textinho sumirá
    como faço?
    tenhoquecontar.blogspot.com

    ResponderExcluir
  7. Anônimo9/4/12 20:39

    Adorei as dicas, usarei no meu blog sempre.
    Mas Helen, ainda tenho dúvidas como, colocar cores nos textos em html. Você pode me ajudar?

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.