Email mkt e html: Introdução

INTRODUÇÃO AOE-MAIL MKT E HTML

RENATO MELO – 2015

E-mail MKTNão deixe que sua empresa seja igual ao seu “Tio chato”

Se você não gosta de receber, por que

enviar?

LegislaçãoCompra de dados é ilegal! Tanto para e-mail, quanto para SMS, você precisa ter autorização da pessoa para enviar e-mail marketing.

LegislaçãoMesmo com autorização, você tem que disponibilizar um link de opt-out, caso o cliente não queira mais suas mensagens.

SPAMQuanto mais marcação como SPAM no seu domínio, pior para você

HTMLHtml é um arquivo que pode ser interpretado por navegadores.

HTMLE pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver

Bloco de notasSomente a linha de código contendo sua programação

DreamweaverEdição do html na linha de código ou no design.

E COMO FUNCIONA

UM CÓDIGO?

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

VAMOS DEIXÁ-LO

FÁCIL!

VAMOS CRIAR UM E-MAIL

MARKETING EM HTML:

Arquivo:http://www.renatomelo.com

.br/esamc/uol.zip

VAMOS MUDAR TUDO!

EDITE O ARQUIVO PELO BLOCO DE NOTAS

DESCOMPACTE TUDO NA MESMA PASTA

ABRA O HTML NO NAVEGADOR

SALVE O ARQUIVO NO BLOCO DE NOTAS

QUER VER COMO ESTÁ INDO AS ALTERAÇÕES?

PRESSIONE A TECLA F5 NO NAVEGADOR

SELECIONE PARA ABRIR TODOS OS ARQUIVOS PARA

APARECER O HTML

HÁ APENAS DOIS ARQUIVOS! O HTML E A

IMAGEM DO EXTRA.

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>

O ABRE E FECHA DE CADA CÓDIGO

TOME CUIDADO PARA NÃO APAGAR

ELEMENTOS. <COMANDO> ABRE UM

COMANDO

</COMANDO> FECHA UM COMANDO.

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

<title>Uol</title></head>


TITLE = TÍTULOLOGO, VAMOS TROCAR UOL PELA PALAVRA DA

SUA ESCOLHA.

<body style="margin: 0px; padding: 0px;“>


INFORMAÇÕES DE MARGEM E DISTÂNCIA.

NÃO VAMOS MEXER AQUI.

<div style="font-size: 10px; font-family: verdana; padding:10px 0 10px 0;" align="center“>


INFORMAÇÕES DE FONTE, DISTÂNCIA E ALINHAMENTO. NÃO VAMOS MEXER AQUI.

<p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br">acesse este

link</a> </p>


CASO O SERVIDOR DE E-MAIL BLOQUEIE A EXIBIÇÃO DA MENSAGEM, A CRIAÇÃO DESTE

LINK RESOLVE O PROBLEMA.

<p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br"> acesse este

link</a> </p>


O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO ONDE TEM

TEXTO.


link</a> </p>


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.


link</a> </p>


COMO ESTAMOS TRABALHANDO DIRETO DO COMPUTADOR, VAMOS

TROCAR O LINK. ALTERE O CONTEÚDO ENTRE “” PARA OUTRO SITE QUALQUER.

VAMOS SUBSTITUIR A IMAGEM DO TIOZINHO DA

UOL?

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

<a href=" http://www.esamc.br "><img src=" uol.jpg " border="0"></a>



ESTE LINK SIGNIFICA QUE, AO CLICAR NA IMAGEM DO TIOZINHO, VOCÊ VAI PARA O SITE DA ESAMC. ALTERE O LINK

PARA UM SITE QUALQUER.

<a href="http://www.extra.com.br"><img src= "uol.jpg" border="0"></a>



TROQUE O ENDEREÇO DA IMAGEM, DE UOL PARA O NOME ESCOLHIDO,

ASSIM: “ARQUIVO.JPG”

VOCÊ PODE FATIAR AS IMAGENS NO PHOTOSHOP

SALVE NA SUA PASTA:renatomelo.com.br/

esamc/rihappy01.png

renatomelo.com.br/esamc/rihappy02.png

renatomelo.com.br/esamc/rihappy03.png

<a href="http://www.rihappy.br"><img src= "uol.jpg" border="0"></a>



TROQUE O ENDEREÇO DO LINK E DA IMAGEM, DE UOL PARA

“RIHAPPY01.PNG”

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


VAMOS COLOCAR UMA IMAGEM ATRÁS DA OUTRA, DE “A” ATÉ “A” –

LEMBRE DE TROCAR O LINK DA IMAGEM TAMBÉM

HÁ! NÃO VAI DAR CERTO!!

ROBIN! PRECISAMOS APRENDER UM NOVO

CÓDIGO!

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


O <BR/> SERÁ RESPONSÁVEL POR DAR ENTER!! INSIRA ELE ENTRE AS IMAGENS,

JÁ COLOQUE AS 3 E SALVE!

NÃO DÊ ESPAÇO DO </a> PARA O <br/>

ESTA AULA ESTÁDISPONÍVEL EM:renatomelo.com.br/slides

ou no grupo do Facebook:bit.ly/gruporenato

Email mkt e html: Introdução

Design

Transcript of Email mkt e html: Introdução