Embora este tutorial utilize Wordpress como referência, as dicas de html valem para todos os blogueiros que desejam aprender a editar posts em html.
Depois de desativar o editor WYSIWYG do Wordpress, apenas algumas opções básicas ficam disponíveis ao editar um post.
Editor WYSIWYG desativado
A vantagem é que o Wordpress não interfere no html que você digitar. Para alguns blogueiros, isso pode causar um efeito indesejado: “O que acontece se eu não sei html? Como vou formatar meus posts?” Este post tem o objetivo de ajudá-los a solucionar esse problema. Vou iniciar com os botões que aparecem no editor de posts, já que a interface é bem espartana.
Ao selecionar um trecho do seu texto e clicar em “b”, será adicionada a tag strong ao redor do texto. Quando seu post for visualizado no blog, o texto que estava marcado com essa tag no editor será mostrado em negrito.
No editor, o texto aparece assim:
<strong>Exemplo de texto em negrito.</strong>
No post, fica assim:
Exemplo de texto em negrito.
Se você clicar em “b” sem selecionar um trecho do texto, será adicionado somente a tag <strong> e o botão vai mudar para “/b” — indicando que você deve clicar para fechar a tag depois de completar o texto.
Esse botão insere a tag para itálico: em. Também acho que “em” não tem a ver com itálico, mas a tag é assim. Tem o mesmo comportamento de “b”: ao selecionar um trecho de texto, adiciona <em> e </em>; sem selecionar, adiciona <em> e o botão muda para “/em”.
No editor, aparece assim:
<em>Exemplo de texto em itálico.</em>
No post, fica assim:
Exemplo de texto em itálico.
Ao clicar no botão “link”, aparece uma caixa solicitando a url do link a ser inserido.
Se eu digitar “http://www.teste.com” e clicar em “Ok”, será inserido no texto a tag “a” e o “href” com a url que digitei: <a href=”http://www.teste.com”>. Então eu escrevo o texto do link, por exemplo: “Link para o site teste.com”. O botão vai mudar para “/link”, indicando que falta fechar a tag. Ao clicar em “/link”, é adicionado ao texto </a> para fechar a tag.
No editor, aparece assim:
<a href="http://www.teste.com">Link para o site teste.com</a>.
No post, fica assim:
Link para o site teste.com.
Além do “href”, há outras propriedades que você pode adicionar à tag “a”, vou mostrar duas: target e title.
Ao adicionar target=”_blank”, o link abre em outra janela/aba do navegador. A propriedade title adiciona um texto curto que aparece quando o leitor pára o indicador do mouse sobre o link.
No editor, aparece assim:
<a href="http://www.teste.com" target="_blank" title="Exemplo">Link para o site teste.com</a>.
No post, fica assim:
Link para o site teste.com.
“Blockquote” é a tag utilizada para indicar uma citação. A forma como a citação será mostrada no blog depende de como essa tag foi definida no arquivo style.css do seu tema/layout. Na verdade, todas as tags podem ter atributos definidos na folha de estilos. Os atributos, porém, variam de tag para tag.
Blockquote no meu tema atual:
blockquote {
margin: 10px 0 0 15px;
padding: 0 15px;
border-left: 7px solid #f9d;
color: #2b2b2b;
}
No editor, aparece assim:
<blockquote>"Nel mezzo del cammin di nostra vita, Mi ritrovai per una selva oscura, Che la diritta via era smarrita." O Inferno Canto I, versos 1 a 3 (Divina Comédia; <a href="http://en.wikiquote.org/wiki/Dante_Alighieri" target="_blank">Dante Alighieri</a>) </blockquote>
No post, fica assim:
“Nel mezzo del cammin di nostra vita,
Mi ritrovai per una selva oscura,
Che la diritta via era smarrita.”O Inferno
Canto I, versos 1 a 3
(Divina Comédia; Dante Alighieri)
A tag del, usualmente, adiciona um traço sobre o texto, como se tivesse sido riscado. Essa tag tem dois atributos optionais: datetime (incluída automaticamente pelo Wordpress ao utilizar o botão del) e cite. Mais detalhes sobre esses atributos em HTML del tag.
del {
text-decoration: line-through;
color: #999999;
}
No editor, aparece assim:
<del>Texto riscado</del>
No post, fica assim:
Texto riscado
De acordo com HTML ins tag, ins indica um trecho que foi adicionado ao texto. Não me lembro de ter usado ins alguma vez.
ins {
text-decoration: underline;
}
No editor, aparece assim:
Minhas cores preferidas são: rosa, azul, <del>verde,</del> <ins>vermelho, </ins> branco, ...
No post, fica assim:
Minhas cores preferidas são: rosa, azul, verde, vermelho, branco, …
De forma semelhante ao botão “link”, ao clicar no botão “img”, deve-se informar o endereço da imagem (depois de feito o upload).
Informe o endereço da imagem depois de fazer upload.
É o atributo “src” define o endereço a partir do qual a imagem será carregada. Em seguida, digite um texto alternativo para a imagem.
Texto alternativo da imagem.
Essa “descrição” será utilizada no atributo “alt”, que é um pequeno texto exibido somente enquanto a imagem é carregada. Depois que a imagem é carregada — isto é, depois que a imagem “aparece” — o texto não é exibido!
No “alt”, em geral, utilizo o nome do arquivo seguido da extensão (png, jpg, gif) para tentar indicar ao leitor que há uma imagem que deve ser carregada.
Depois de informar o texto alternativo, no editor, aparece assim:
<img src="http://tatianeps.net/wp-usr-upload/2008/10/csiny316_stella.jpg" alt="csiny316_stella.jpg" />
No post, fica assim:
Viu que o que escrevi no alt, “csiny316_stella.jpg”, não apareceu abaixo da imagem. Uma descrição de verdade pode ser adicionada de várias formas. Mas vamos centralizar a imagem antes?
Também há muitas maneiras de centralizar uma imagem, vou mostrar a que utilizo aqui no blog: utilizando a tag “p” (parágrafo). Antes de “<img“, adicione “<p align=”center”>“; depois de fechar a tag img, adicione “</p>“.
No editor, aparece assim:
<p align="center" />
<img src="http://tatianeps.net/wp-usr-upload/2008/10/csiny410_mac.jpg" alt="csiny410_mac.jpg" />
</p>
No post, fica assim:
Agora que a imagem foi centralizada, vamos adicionar a descrição?
Para isso, adiciono “<br /><small>Texto da descrição</small>” antes de fechar o parágrafo com o “</p>“.
No editor, aparece assim:
<p align="center" />
<img src="http://tatianeps.net/wp-usr-upload/2008/10/csiny221_stella.jpg" alt="csiny221_stella.jpg" />
<br />
<small>Stella Bonasera (interpretada por Melina Kanakaredes)
<br /> no episódio de CSI:NY em que ela é agredida pelo ex-namorado.</small>
</p>
No post, fica assim:
Stella Bonasera (interpretada por Melina Kanakaredes)
no episódio de CSI:NY em que ela é agredida pelo ex-namorado.
Caso você tenha ficado com alguma dúvida em relação ao “<small>“, tudo o que essa tag faz é deixar o texto com a fonte pequena (small em inglês). Mais informações em HTML font style.
A tag img ainda tem outros atributos que você pode ver no HTML img tag.
Esses três botões são para a criação de listas. O primeiro é “ul” de Unordered List, ou seja, lista não ordenada. O segundo, “ol” de Ordered List, é para a criação de listas ordenadas. O último, “li” (List Item?), é para adicionar um elemento, utilizado nos dois tipos de lista.
A forma como cada item de uma lista não ordenada pode ser demarcado é definida pelo atributo “type“, podem ser utilizados os seguintes valores: disc, square, circle. Para mais informações, consulte HTML ul tag.
Ou você pode definir uma imagem no seu arquivo css para demarcar cada item. Atualmente, utilizo duas: uma nos posts (
) e outra na barra lateral (
). Para isso, utilizo “list-style” no arquivo css.
#postWrapper ul {
list-style: url('images/contentList.png');
margin-left: 20px;
}
#sidebarWrapper ul {
list-style: url('images/list.gif');
margin-left: 20px;
}
Lista não ordenada
No editor, aparece assim:
<ul>
<li>Canadá</li>
<li>Nova Zelândia</li>
<li>Inglaterra</li>
<li>EUA</li>
</ul>
No post, fica assim:
Lista ordenada
No editor, aparece assim:
<ol>
<li>Canadá</li>
<li>Nova Zelândia</li>
<li>Inglaterra</li>
<li>EUA</li>
</ol>
No post, fica assim:
Mais informações sobre listas, consulte: HTML ul tag, HTML ol tag e HTML li tag.
Em vez da tag “code“, estou utilizando “pre” para exibir trechos de código. A tag “pre” mantém certas características para que o código fique organizado: espaços que indicam tabulação, por exemplo.
/* exemplo em PHP */
for ($i = 1; $i <= 10; $i++) {
echo $i;
}
Adiciona “<!–more–>” ao texto. Indica que o post só será exibido por inteiro — desse ponto em diante — na página indicada pelo permalink do post. Mais informações em Customizing the Read More.
Embora eu utilize the_excerpt() quando só quero mostrar um resumo do post, recomendo o uso dessa quicktag. Porque the_excerpt() é uma função do Wordpress e requer alterações nos arquivos do seu template.
Essa não é uma tag. É um atalho para pesquisar no texto do seu post.
Atenção! Não recomendo o uso desse comando. Pois, se houver mais de uma tag a ser fechada, esse comando pode fechá-las sem seguir a ordem correta — isto é, causando problemas.
Sublinhar
Para sublinhar um trecho do seu texto, você deve escrever “<u>” e “</u>“.
No editor, aparece assim:
<u>Exemplo de texto sublinhado.</u>
No post, fica assim:
Exemplo de texto sublinhado.
Mudar a cor do texto
Se você já está utilizando uma das tags para negrito, itálico ou sublinhar o texto, basta adicionar — dentro dessa tag — “style=’color: NomeDaCor’;“.
No editor, aparece assim:
<u style="color:Purple;">Exemplo de texto sublinhado e roxo (Purple).</u> <strong style="color:#228B22;">Exemplo de texto em negrito e verde (ForestGreen, #228B22).</strong> <em style="color:DodgerBlue;">Exemplo de texto em itálico e azul (DodgerBlue).</em>
No post, fica assim:
Exemplo de texto sublinhado e roxo (Purple).
Exemplo de texto em negrito e verde (ForestGreen, #228B22).
Exemplo de texto em itálico e azul (DodgerBlue).
Ou pode utilizar a tag span.
No editor, aparece assim:
<span style="color:IndianRed;">Exemplo de texto em vermelho (IndianRed).</span> <span style="color:#C71585;">Exemplo de texto em rosa (DeepPink, #C71585).</span> <span style="color:Lime;">Exemplo de texto em verde (Lime).</span>
No post, fica assim:
Exemplo de texto em vermelho (IndianRed).
Exemplo de texto em rosa (DeepPink #C71585).
Exemplo de texto em verde (Lime).
Os nomes de cores, em inglês, mais comuns funcionam: blue, navy, red, green, gray. Se você quiser variar um pouco, não precisa decorar códigos em hexadecimal (#C71585, por exemplo). Também não precisa decorar os nomes das cores. É só consultar uma tabela.
A quantidade de cores representáveis por meio de nomes é muito menor que as representadas em hexadecimal. Por isso, se precisar de mais cores, basta pedir ajuda ao Google. 
