# Olá steemians! Tudo bem?

Se você é BR e ainda não entrou no nosso grupo no Telegram STEEMIT Brasil [clique aqui](https://t.me/steemitbrasil) 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](https://steemit.com/pt/@matheuseabra/markdown-para-iniciantes-dominando-a-formatacao-dos-seus-posts-no-steemit) 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>```

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


#### Itálico
Pode utilizar também a tag `<em>`

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

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


#### Sublinhado

**O Steemit não suporta a tag** `<u>`


#### Deletado

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

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

---

## 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>```

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

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

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

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

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

---

## 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>```

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

---

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

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

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

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

---

## Lista ordenada / não ordenada

#### Lista ordenada

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

#### Lista não ordenada

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

---

## 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>
```
<br />
<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 negrito</strong>, dou espaço<br />
<del> e deleto essa frase.</del> <br />
<code>Código-fonte</code> e <a href="http://www.google.com">link para o Google</a>.
</div>
```
<br />
<div class="text-justify">
<h1>Pequeno texto</h1> 
<strong>Escrevendo em <i>itálico</i> e negrito</strong>, dou espaço<br />
<del> e deleto essa frase.</del> <br />
<code>Código-fonte</code> e <a href="http://www.google.com">link para o Google</a>.
</div>

---
<br />
<div class="text-center"><strong><i>Gostou? Vote nesse post e compartilhe!</i></strong></div>