[Programação] HTML para steemians!

in pt •  7 years ago  (edited)

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>

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

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>

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

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>

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

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>

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.

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>


Moeda Cotação
BTC/BRL 46.611,02
STEEM/BTC 0.00042
SBD/BTC 0.00046016

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>


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!
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  ·  7 years ago (edited)

Um post muito útil e com certeza irá ajudar bastante os novos membros do Steemit com a formatação dos seus posts. Obrigado por compartilhar e parabéns pela iniciativa. Eu estou estudando Markdown e uma ferramenta chamada Remarkable não sei conhece, vale a pena conferir esse tutorial Se você tiver dez minutos, você pode aprender Markdown! ;) vou escrever depois um post sobre.

Obrigado @aldenio! Se precisar de ajuda para fazer o post sobre markdown, fala comigo!

Excelente conteúdo! Vai ajudar bastante! Muito obrigado!

Ficou ótimo, vai ajudar bastante na hora de editar textos.

Exatamente. Procurei colocar todas as tags suportadas. Como a plataforma sempre evolui pode acontecer de surgir novos recursos pra explorarmos. A partir daí surgirão novos posts! Abs

Conforme prometido, você fez mesmo o post.
Eu mesmo não vou saber usar a metade, mas muita gente aqui vai usar tudo.
Belo post! Ajudou a comunidade.

@belzunces, se tiver alguma dúvida pode comentar aqui ou manda um privado no telegram. Meu nome de usuário tambem é @menkarbit. Estou sempre à disposição! Abs

Boa!! Já vou passar pra uns amigos meus.

Obrigado @altsider! Fica à vontade! Compartilhando a informação permite com que possamos contribuir mais pra plataforma! Abs

Excelente manual, já deixei nos favoritos do navegador para ser meu guia

Muito útil para quem não percebe de HTML. Contudo o Steemit tem que evoluir um pouco no editor de texto, pois para quem não percebe é um pouco complicado.

Verdade. Tô me virando no Markdown mesmo e tô inclusive pesquisando mais a fundo pra, quem sabe, fazer um post completão sobre ele. Creio que não demorarei muito! Abs

Adorei este post!! Ando à alguns dias a perguntar-me como é que se justifica o texto e encontrei aqui a minha resposta.
Sem dúvida que foi um post muito útil.

Muito obrigado! Certamente esse post vai ajudar muita gente, inclusive pra quem já sabe html. Como temos alguns recursos limitados pela plataforma, procurei saber o que funciona e o que nao funciona e coloquei aqui no post. Sempre que tiver atualizações irei postar novamente.

Muito bem! Penso que este post vai ser útil a muita gente ;) vou dar resteem

Obrigado! Com todos nós somando com certeza teremos uma comunidade forte! Abs

Parabéns pelo post, ficou bem fácil de entender e usar o html. Peguei seu post emprestado para as dicas de post do meu, ok?

https://steemit.com/pt/@felipehukken/top-pt-post-do-final-de-semana

Muito obrigado! Fica à vontade! O que importa é contribuir

Opa @menkarbit!! Daora ver que você tem contribuído bastante para a plataforma, grato pela contribuição!!

Obrigado meu amigo! Ainda acho pouco, tenho muito conteúdo ainda pra disseminar! Abs

Opa, de nada!! E que bom que tem conteúdo, estamos aí para acompanhar e compartilhar!!

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by menkarbit from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.