Olá steemians! Tudo bem?

Se você é BR e ainda não entrou no nosso grupo no Telegram STEEMIT Brasil clique aqui e participe! Vamos ajudar a crescer a comunidade brasileira!!

Então, foi nesse grupo que rolou uma certa dificuldade com o pessoal em utilizar o HTML para fazer os seus posts. Como eu sou programador web, decidi fazer esse post para ensinar HTML e também umas dicas bacanas pra quem deixar o seu post mais estiloso.

Obs.: esse post é só sobre HTML. Não irei abordar sobre Markdown. Esse post aqui do @matheuseabra tem umas dicas bacanas sobre Markdown, clica lá!

Esse post é pra você que quer ir além do Markdown e fazer umas edições mais avançadas. Aqui irei abordar todas as tags suportadas pelo Steemit - infelizmente não são muitas - para facilitar o desenvolvimento e deixar os seus posts mais bonitos. Não é necessário ser programador ou saber tudo de HTML para poder utilizar os recursos desse post. Um CTRL-C + CTRL-V e editar as informações já é o suficiente. Procurei colocar o máximo de informação possível para vocês extraírem o melhor do Steemit. Caso faltar algo é só comentar, please!

Pra quem não sabe acessar o editor de HTML no Steemit é bem simples. Clique no botão "Post" e acima do campo de texto para edição, clique em "Editor" e escreva qualquer coisa. Onde estava escrito "Editor" aparecerá "Raw HTML". Clique nele e voilà!

Títulos

São os títulos de um determinado texto. Os tamanhos vão de 1 a 6, sendo do maior para o menor.

<h1>Primeiro título</h1>
<h2>Segundo título</h2>
<h3>Terceiro título</h3>
<h4>Quarto título</h4>
<h5>Quinto título</h5>
<h6>Sexto título</h6>

Primeiro título

Segundo título

Terceiro título

Quarto título

Quinto título

Sexto título

Linha horizontal

É a linha que divide as seções desse post, por exemplo.

<hr />

Espaço

É o espaço que você dá quando pressiona a tecla ENTER. Auxilia e muito na hora da formatação.

<br />

Negrito / Itálico / Sublinhado / Deletado

Negrito

<strong>Uma bela frase em negrito!</strong>

Uma bela frase em negrito!

Itálico

Pode utilizar também a tag <em>

<i>Uma bela frase em itálico!</i>

Uma bela frase em itálico!

Sublinhado

O Steemit não suporta a tag <u>

Deletado

<del>Uma bela frase deletada!</del>

Uma bela frase deletada!

Alinhamento à direita / à esquerda / centralizado / justificado

Alinhamento à direita

<div class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Alinhamento à esquerda

<div class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Alinhamento centralizado

<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Alinhamento justificado

<div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

Citações

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Código de programação

<code>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</code>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Imagem

Coloque o endereço da imagem dentro das aspas src="" conforme exemplo abaixo:

<img src="https://steemitimages.com/DQmXuMfeGQBZ42BmgQjVVDx6ULujEmcfZ5jJgHKoCQZRTFp/code-1076533_1920.jpg">

Link

Coloque o endereço desejado dentro das aspas href="" conforme exemplo abaixo:

<a href="https://steemit.com/@menkarbit">Acesse o meu blog!</a>

Acesse o meu blog!

Lista ordenada / não ordenada

Lista ordenada

<ol>
     <li>Primeiro item</li>
     <li>Segundo item</li>
     <li>Terceiro item</li>
</ol>

1. Primeiro item
2. Segundo item
3. Terceiro item

Lista não ordenada

<ul>
     <li>Primeiro item</li>
     <li>Segundo item</li>
     <li>Terceiro item</li>
</ul>

• Primeiro item
• Segundo item
• Terceiro item

Tabelas (com título)

<table>
    <thead>
        <tr>
            <th>Moeda</th>
            <th>Cotação</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>BTC/BRL</td>
            <td>46.611,02</td>
        </tr>
        <tr>
            <td>STEEM/BTC</td>
            <td>0.00042</td>
        </tr>
        <tr>
            <td>SBD/BTC</td>
            <td>0.00046016</td>
        </tr>
    </tbody>
</table>

Um pequeno exemplo de uso do HTML

<div class="text-justify">
<h1>Pequeno texto</h1> 
<strong>Escrevendo em <i>itálico</i> e negritostrong>, dou espaço<br />
<del> e deleto essa frase.</del> <br />
<code>Código-fonte</code> e link para o Googlea>.
</div>




Pequeno texto
 
Escrevendo em itálico e negrito, dou espaço

 e deleto essa frase. 

Código-fonte e link para o Google.




Gostou? Vote nesse post e compartilhe!