11

Insira imagens e vídeos no seu artigo na DIO! [HOW TO]

#HTML #CSS
João Trepichio
João Trepichio

Seus artigos ficarão com aspecto mais profissional, e será melhor compreendido pelo seu público-alvo com uso de imagens e vídeos!


Primeiro, escreva todo seu artigo em HTML no seu editor favorito, e coloque tudo dentro dessa div

<div class="ql-editor" data-gramm="false" contenteditable="true" data-placeholder="Escreva o artigo aqui">
    ...coloque seu artigo HTML aqui...
</div>


DICA: Você pode escrever tudo em Markdown, se preferir, e depois converter para HTML usando um conversor online.


Você pode utilizar no seu artigo tags como

<h1>, <p>, <a>, <br>, <img>, <iframe>

... o que vc quiser! Não se limite ao editor da DIO.


Poderá inserir um vídeo qualquer como esse:


desde que o mesmo esteja hospedado em algum lugar na web. Só vai precisar da URL. DICA: Caso seja do Youtube, só copiar o iframe que é gerado pelo próprio site. Poderá inserir imagens utilizando uma URL como essa: imagem do autor do artigo DICA: É possível codificar qualquer imagem em uma string BASE64 e inserir no atributo

src da tag img, não necessitando assim que esteja hospedada em lugar algum.


Para isso, utilize um site como o BASE64 IMAGE e arraste ou carregue suas imagens ali e copie a string gerada para o atributo src da tag <img>.


Então, fez seu artigo cheio de imagens, vídeos e estilizou seus parágrafos e tudo mais com CSS inline ?? Legal, então agora é hora de publicar na DIO! Mas ANTES minifique seu html e segue o roteiro abaixo:


  1. Abra a DevTools do navegador (aperte F12)
  2. Com a Devtools aberta na aba 'Elementos' faça uma busca (aperte Ctrl + F)
  3. Digite no campo o termo: .ql-editor imagem que mostra como localizar o elemento usando a Devtools
  4. Encontrado o elemento (em destaque), clique sobre o mesmo com o botão direito e selecione 'Editar como HTML' imagem que mostra como substituir o elemento usando a Devtools
  5. No campo que abrir, substitua todo o texto com o HTML do seu artigo. Basta 'colar' como demonstrado na imagem abaixo. imagem que mostra colando o artigo em HTML
  6. Após colar o conteúdo, clique em algum lugar fora do campo para a alteração ser salva
  7. Feche a DevTools (aperte F12)
  8. Agora é so clicar em 'Publicar' imagem que mostra publicando este artigo na DIO


Se gostou me siga no GitHub!

E isso é tudo, pessoal!

imagem do Looney Tunes se despedindo! E isso é tudo pessoal!

1
87

Comentários (1)

0
M

Mateus Oliveira

07/01/2021 14:33

Bacana! Parabéns pela descoberta kkkk já vou usar esse novo recurso, obrigado por compartilhar!

If you can't fix it with Clean Code, you're not using enough Clean Code!

Brasil