[Blogger] - Mostrando HTML literalmente em um artigo do Blogger

Olá querido leitor, seja bem-vindo a mais um artigo. No artigo de hoje, veremos como inserir códigos HTML dentro dos artigos de um blog do Blogger. Este artigo surgiu de uma dúvida enviada pela leitora, Natsmelo. Às vezes quando estamos criando um artigo, precisamos ilustrá-lo com imagens para facilitar o entendimento por parte do leitor, porém, quando este artigo se trata de um tutorial para blogs, geralmente se faz necessário que informemos alguns códigos HTML para que o leitor se localize.

O que acontece, é que se digitarmos o HTML diretamente dentro do artigo, ele será interpretado pelo navegador, que é exatamente o que nós não queremos. Então, como mostrar literalmente o HTML dentro de um artigo do Blogger, sem que ele seja interpretado pelo navegador? A resposta é simples, precisamos converter este código HTML para texto plano. Por exemplo, o que geralmente escreveriamos assim:

<b>Texto em negrito</b>

...deverá ser escrito assim:

&lt;b&gt;Texto em negrito&lt;/b&gt;

...ou seja, sempre que você quiser que um código HTML não seja interpretado pelo navegador, você deve convertê-lo como no exemplo acima, onde substituímos: < (sinal de menor que) por &lt; e > (sinal de maior que) por &gt;. Assim este dois caracteres (< e >) que indicam ao navegador que se trata de uma tag HTML, não serão interpretados como tal, e sim como texto plano.

Você deve substituir apenas os caracteres que formam as tags HTML por seus respectivos códigos, veja uma pequena tabela logo abaixo.

Caractere Respectivo código
" &quot;
& &amp;
< &lt;
> &gt;
Veja uma tabela mais completa, clicando aqui.

É claro que é muito difícil gravar todos os códigos de cabeça, e ter que ficar trocando caractere por caractere é algo muito desgastante. Se o código for muito extenso então, nem se fala. Porém, nesses casos eu costumo utilizar o recurso de Substituir do bloco de notas do Windows, como você pode ver na imagem abaixo.

Ferramenta de substituição (Ctrl+H) do bloco de notas

Esta é uma forma bem rápida de alterar os caracteres, mas que atende mais a quem lida com códigos diariamente, pois você precisa saber o código em texto plano do caractere que você deseja substituir. Para não perder tempo, existem sites que fornecem um conversor de HTML, bastando colar o código no campo indicado, clicar em "Converter" evoilà, está pronto. Veja um exemplo na imagem abaixo.

NoSetup: conversor de HTML para texto plano

O exemplo mostrado acima, foi criado através do site: NoSetup — mas há outros sites com a mesma finalidades, como por exemplo o BlogCrowds. Agora, bastaria copiar o código que foi gerado no campo "Código HTML en texto plano" e colar no artigo. Só isso já faria com que o código aparecesse literalmente dentro do artigo, mas você pode dar um destaque maior para o seu código, colocando-o entre as tags: <code> e </code>, como no exemplo abaixo.

<code>&lt;b&gt;Texto em negrito&lt;/b&gt;</code>

INFORMAÇÃO: os conversores substituem as " (aspas) do código também, porém, só de subistituir os sinais de "maior que" e "menor que", já é o suficiente para mostrar o HTML literalmente, pois assim o navegador já não interpretará mais o código como sendo uma tag HTML, consequentemente mostrando as aspas literalmente também.

Estas duas tags, servem para criar uma "caixa de código". Porém, essa caixa varia de acordo com o template que está sendo utilizado no blog, cada template tem uma customização diferente, assim como o template pode não ter nenhuma também.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 2 comentários neste artigo!

  1. Igor...nossa é melhor eu nem ler isso é tão grego pra mim que pode dar nó na minha mente...afff !!! Qdo eu quero mudar algo no blog, tem que ver o poder de concentração e silencio que eu preciso hahaha..isso é o ó ! rs
    Beijos

    ResponderExcluir
  2. Ana: até que é fácil, só ir treinando que vodê pega a prática!!

    Pretendo mais pra frente começar uma série de artigos sobre HTML e CSS, ai ficará mais fácil - pelo menos eu espero - de entender as coisas!

    Qualquer dúvida ai, é só gritar! Rsrs.
    Grande beijo!

    ResponderExcluir