Email mkt e html: Introdução
Transferir como PPT, PDF3 gostaram1,047 visualizações
O documento fornece uma introdução sobre e-mail marketing e HTML, ensinando como criar um e-mail de marketing simples em HTML. Explica os principais elementos do código HTML como tags, links e imagens e como editar um arquivo HTML existente para customizá-lo.
Email mkt e html: Introdução
- 1. INTRODUÇÃO AO E-MAIL MKT E HTML RENATO MELO – 2015
- 2. E-mail MKT Não deixe que sua empresa seja igual ao seu “Tio chato”
- 3. Se você não gosta de receber, por que enviar?
- 4. Legislação Compra de dados é ilegal! Tanto para e-mail, quanto para SMS, você precisa ter autorização da pessoa para enviar e-mail marketing.
- 5. Legislação Mesmo com autorização, você tem que disponibilizar um link de opt-out, caso o cliente não queira mais suas mensagens.
- 6. SPAM Quanto mais marcação como SPAM no seu domínio, pior para você
- 7. HTML Html é um arquivo que pode ser interpretado por navegadores.
- 8. HTML E pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver
- 9. Bloco de notas Somente a linha de código contendo sua programação
- 10. Dreamweaver Edição do html na linha de código ou no design.
- 12. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Extra</title> </head> <body style="margin: 0px; padding: 0px;"> <div style="font-size: 10px; font-family: verdana; padding:10px 0 10px 0;" align="center"> <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://renatomelomkt.com.br/esamc/web-aula2/extra.html">acesse este link</a> </p> <a href="http://www.extra.com.br"><img src="http://renatomelomkt.com.br/esamc/web-aula2/extra.jpg" border="0"></a> </div> </body> </html>
- 14. VAMOS CRIAR UM E-MAIL MARKETING EM HTML: Arquivo: http://www.renatomelo.com .br/esamc/uol.zip
- 16. EDITE O ARQUIVO PELO BLOCO DE NOTAS DESCOMPACTE TUDO NA MESMA PASTA ABRA O HTML NO NAVEGADOR
- 17. SALVE O ARQUIVO NO BLOCO DE NOTAS QUER VER COMO ESTÁ INDO AS ALTERAÇÕES? PRESSIONE A TECLA F5 NO NAVEGADOR
- 18. SELECIONE PARA ABRIR TODOS OS ARQUIVOS PARA APARECER O HTML
- 19. HÁ APENAS DOIS ARQUIVOS! O HTML E A IMAGEM DO EXTRA.
- 20. O CÓDIGO TEM 2 PARTES <HEAD> TUDO AQUILO QUE NÃO É EXIBIDO NO NAVEGADOR, COM EXCESSÃO DO TÍTULO. </HEAD> <BODY> TUDO AQUILO QUE É EXIBIDO NO NAVEGADOR.</BODY>
- 21. O ABRE E FECHA DE CADA CÓDIGO TOME CUIDADO PARA NÃO APAGAR ELEMENTOS. <COMANDO> ABRE UM COMANDO </COMANDO> FECHA UM COMANDO.
- 22. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> INTERPRETANDO O CÓDIGO INFORMAÇÕES INICIAIS DO CÓDIGO, NÃO VAMOS MEXER EM NADA.
- 23. <title>Uol</title> </head> INTERPRETANDO O CÓDIGO TITLE = TÍTULO LOGO, VAMOS TROCAR UOL PELA PALAVRA DA SUA ESCOLHA.
- 24. <body style="margin: 0px; padding: 0px;“> INTERPRETANDO O CÓDIGO INFORMAÇÕES DE MARGEM E DISTÂNCIA. NÃO VAMOS MEXER AQUI.
- 25. <div style="font-size: 10px; font-family: verdana; padding:10px 0 10px 0;" align="center“> INTERPRETANDO O CÓDIGO INFORMAÇÕES DE FONTE, DISTÂNCIA E ALINHAMENTO. NÃO VAMOS MEXER AQUI.
- 26. <p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br">acesse este link</a> </p> INTERPRETANDO O CÓDIGO CASO O SERVIDOR DE E-MAIL BLOQUEIE A EXIBIÇÃO DA MENSAGEM, A CRIAÇÃO DESTE LINK RESOLVE O PROBLEMA.
- 27. <p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br"> acesse este link</a> </p> INTERPRETANDO O CÓDIGO O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO ONDE TEM TEXTO.
- 28. <p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br"> acesse este link</a> </p> INTERPRETANDO O CÓDIGO O <A> É PARA INCLUSÃO DE LINKS. NO CASO, AS PALAVRAS ACESSE ESTE LINK VÃO SER MARCADAS PARA RECEBER O ENDEREÇO DO SITE.
- 29. <p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br"> acesse este link</a> </p> INTERPRETANDO O CÓDIGO COMO ESTAMOS TRABALHANDO DIRETO DO COMPUTADOR, VAMOS TROCAR O LINK. ALTERE O CONTEÚDO ENTRE “” PARA OUTRO SITE QUALQUER.
- 30. VAMOS SUBSTITUIR A IMAGEM DO TIOZINHO DA UOL?
- 31. PASSO A PASSO 1 – PROCURE UMA IMAGEM NO GOOGLE 2 – SALVE NA MESMA PASTA DO HTML 3 – DEIXE A IMAGEM COM UM NOME FÁCIL E EM MINÚSCULO 4 – VERIFIQUE SE A IMAGEM ESTÁ EM PNG OU JPG
- 32. <a href=" http://www.esamc.br "><img src=" uol.jpg " border="0"></a> </div> </body> </html> INTERPRETANDO O CÓDIGO ESTE LINK SIGNIFICA QUE, AO CLICAR NA IMAGEM DO TIOZINHO, VOCÊ VAI PARA O SITE DA ESAMC. ALTERE O LINK PARA UM SITE QUALQUER.
- 33. <a href="http://www.extra.com.br"><img src= "uol.jpg" border="0"></a> </div> </body> </html> INTERPRETANDO O CÓDIGO TROQUE O ENDEREÇO DA IMAGEM, DE UOL PARA O NOME ESCOLHIDO, ASSIM: “ARQUIVO.JPG”
- 34. VOCÊ PODE FATIAR AS IMAGENS NO PHOTOSHOP
- 35. SALVE NA SUA PASTA: renatomelo.com.br/ esamc/rihappy01.png renatomelo.com.br/ esamc/rihappy02.png renatomelo.com.br/ esamc/rihappy03.png
- 36. <a href="http://www.rihappy.br"><img src= "uol.jpg" border="0"></a> </div> </body> </html> INTERPRETANDO O CÓDIGO TROQUE O ENDEREÇO DO LINK E DA IMAGEM, DE UOL PARA “RIHAPPY01.PNG”
- 37. <a href="http://www.rihappy.com.br"><img src=“rihappy01.png" border="0"></a><a href="http://www.rihappy.com.br"><img src=“rihappy02.png" border="0"></a></div> </body> </html> INTERPRETANDO O CÓDIGO VAMOS COLOCAR UMA IMAGEM ATRÁS DA OUTRA, DE “A” ATÉ “A” – LEMBRE DE TROCAR O LINK DA IMAGEM TAMBÉM
- 38. HÁ! NÃO VAI DAR CERTO!!
- 39. ROBIN! PRECISAMOS APRENDER UM NOVO CÓDIGO!
- 40. <a href="http://www.rihappy.br"><img src="rihappy01.png" border="0"></a><br/> <a href="http://www.rihappy.br"><img src="rihappy2.png" border="0"></a><br/> <a href="http://www.rihappy.br"><img src="rihappy3.png" border="0"></a> INTERPRETANDO O CÓDIGO O <BR/> SERÁ RESPONSÁVEL POR DAR ENTER!! INSIRA ELE ENTRE AS IMAGENS, JÁ COLOQUE AS 3 E SALVE!
- 41. NÃO DÊ ESPAÇO DO </a> PARA O <br/>
- 42. ESTA AULA ESTÁ DISPONÍVEL EM: renatomelo.com.br/slides ou no grupo do Facebook: bit.ly/gruporenato